Bootstrap Grayscale主题非文本元素居中对齐问题咨询

修复步骤 #

1. 调整布局列宽 #

原代码中<div class="col-xl-8 col-lg-7">限制了内容区域宽度，导致左侧出现多余留白，修改为全宽居中配置即可：

<div class="col-12 col-lg-10 mx-auto">

2. 新增CSS样式 #

将以下样式添加到你的styles.css文件最底部，避免优先级不够被Bootstrap默认样式覆盖：

/* 清除.text-pre的默认缩进和边距 */
.text-pre {
  text-align: center;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
}

/* 下拉框和图片居中对齐、调整垂直位置 */
.text-pre select, .text-pre img {
  display: inline-block;
  vertical-align: middle;
  margin: 0.5rem 0.25rem !important;
}

/* 表单内边距调整，让布局更紧凑 */
.featured-text form {
  padding: 0 1rem !important;
  max-width: 600px;
  margin: 0 auto !important;
}

3. CSS缓存清除方案 #

• 本地调试：直接按Ctrl+F5（Windows系统）/Command+Shift+R（Mac系统）强制刷新浏览器，即可跳过缓存加载最新样式
• 线上部署：给CSS引入链接添加版本号参数，每次更新样式时修改版本号，即可强制所有用户加载新样式，示例：

<link rel="stylesheet" href="/static/styles.css?v=20240520">

调整后的完整HTML代码片段 #

<!-- Projects-->
<section class="projects-section bg-light" id="projects">
  <div class="container">
    <!-- Featured Project Row-->
    <div class="row align-items-center no-gutters mb-4 mb-lg-5">
      <div class="col-12 col-lg-10 mx-auto">
        <div class="featured-text text-center">
          <form class="text-white-50 mx-auto mt-2 mb-5" method="POST" action="/result">
            <h1>Lineup:</h1>
            <div class="text-pre">
              <h3><b>Team A: {{ scorea }}</b></h3>
              <select id="changeImageA">
                <option>other</option>
                <option>blue</option>
                <option>white</option>
                <option>black</option>
                <option>red</option>
              </select>
              <img id="imageA" src='/static/other.png' width="50" height="60">
              <p>{% for player in teama %}{{ player }}<br>{% endfor %}</p>
            </div>
            <div class="text-pre">
              <h3><b>Team B: {{ scoreb }}</b></h3>
              <select id="changeImageB">
                <option>other</option>
                <option>blue</option>
                <option>white</option>
                <option>black</option>
                <option>red</option>
              </select>
              <img id="imageB" src='/static/other.png' width="50" height="60">
              <p>{% for player in teamb %}{{ player }}<br>{% endfor %}</p>
            </div>
            <h3><b>Save lineup?</b></h3>
            <input class="btn btn-primary js-scroll-trigger" type="submit" name="submit_button" value="Store">
            <input class="btn btn-primary js-scroll-trigger" type="submit" name="submit_button" value="Rerun">
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

注：原代码中h3标签嵌套在p标签内属于无效HTML结构，上述代码已做修正，可减少异常布局问题。

内容的提问来源于stack exchange，提问作者Richard Bignell