如何用Bootstrap实现标签旁网格居中的表单布局？

我看了你的代码和需求，这几个小调整就能帮你把当前布局改成目标样式：

1. 先修复语法小错误 #

你第二个row标签里的traction-row类名没闭合引号，这会导致Bootstrap的布局样式出问题，先把它补上：

<div class="row traction-row">

2. 调整列宽让输入框均匀占满整行 #

目标布局里每行3个输入框是均匀分布的，你之前用的col-lg-3会让每个输入框只占1/4宽度，剩下的空间空着。改成col-lg-4 col-md-4 col-sm-12，这样每行3个刚好占满12列的容器，布局就整齐了。

3. 调整间距让布局更紧凑 #

给.metrics-group加一点自定义CSS，让标题和表单、两行输入框之间的间距更贴合目标效果：

.metrics-group {
  margin-bottom: 1rem;
}
.metrics-group p {
  font-weight: 600; /* 让标题更突出，和目标图一致 */
  margin-bottom: 0.5rem;
}
.traction-row {
  margin-top: 0.75rem; /* 两行输入框之间的间距 */
}

4. 完整修改后的代码 #

把所有调整整合后的代码如下，直接替换你的原有代码就行：

<div class="metrics-group">
  <p>Revenue</p>
  <div class="form-group">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12">
        <label for="6month_old_revenue">6 months ago</label>
        <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
        <label for="5month_old_revenue">5 months ago</label>
        <input type="number" class="form-control" id="5month_old_revenue" maxlength="2" required>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
        <label for="4month_old_revenue">4 months ago</label>
        <input type="number" class="form-control" id="4month_old_revenue" maxlength="2" required>
      </div>
    </div>
    <div class="row traction-row">
      <div class="col-lg-4 col-md-4 col-sm-12">
        <label for="3month_old_revenue">3 months ago</label>
        <input type="number" class="form-control" id="3month_old_revenue" maxlength="2" required>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
        <label for="2month_old_revenue">2 months ago</label>
        <input type="number" class="form-control" id="2month_old_revenue" maxlength="2" required>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
        <label for="1month_old_revenue">1 month ago</label>
        <input type="number" class="form-control" id="1month_old_revenue" maxlength="2" required>
      </div>
    </div>
  </div>
</div>

这样调整后，你的表单布局就会和目标图一致，每行3个输入框均匀分布，间距也更合理，标题也更突出啦。

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