Bootstrap 3 Grid System布局问题：消除空白实现标签上下排列

我明白你在Bootstrap 3网格布局里遇到的麻烦了——想把「Contact Details」标签放到「Date of Birth」下方，还不想留下大片空白，确实offset类的放置位置很关键，放不对就容易出现多余间距。

核心思路 #

Bootstrap 3的网格基于12列系统，要避免空白，关键是让表单组的列布局和上方元素匹配，尽量复用同一个row（不要随意新增不必要的row，多余的row会自带margin导致空白），同时正确使用col-*-offset-*类来调整位置。

修正后的代码示例 #

假设你的原有代码结构类似这样，我给你调整成符合需求的布局：

<form method="post" role="form">
  <div class="row setup-content">
    <!-- Date of Birth 表单组 -->
    <div class="col-md-6">
      <div class="form-group">
        <label for="dateOfBirth">Date of Birth</label>
        <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
      </div>
    </div>

    <!-- Contact Details 表单组：放在Date of Birth所在的row里，自动换行到下方 -->
    <!-- 方案1：占满整行，无空白 -->
    <div class="col-md-12">
      <div class="form-group">
        <label for="contactDetails">Contact Details</label>
        <input type="text" class="form-control" id="contactDetails" name="contactDetails" placeholder="Enter your contact info">
      </div>
    </div>

    <!-- 方案2：如果需要和Date of Birth的列宽度/对齐方式一致（比如都偏移2列） -->
    <!-- <div class="col-md-6 col-md-offset-0">
      <div class="form-group">
        <label for="contactDetails">Contact Details</label>
        <input type="text" class="form-control" id="contactDetails" name="contactDetails">
      </div>
    </div> -->

    <!-- 方案3：如果需要Contact Details偏移到和Date of Birth的左侧对齐（比如Date of Birth在col-md-4 offset-md-2） -->
    <!-- <div class="col-md-8 col-md-offset-2">
      <div class="form-group">
        <label for="contactDetails">Contact Details</label>
        <input type="text" class="form-control" id="contactDetails" name="contactDetails">
      </div>
    </div> -->
  </div>
</form>

关键细节说明 #

• 不要随意新增row：如果你的原有代码里「Contact Details」在单独的row中，那row自带的上下margin会导致大片空白，把它移到「Date of Birth」所在的row里，网格会自动换行，无额外间距。
• offset类的正确位置：col-md-offset-*必须和col-md-*放在同一个<div>标签上，比如class="col-md-6 col-md-offset-3"，这样这个列会偏移3列，占据6列宽度，完美对齐且无空白。
• 匹配列宽度：如果希望「Contact Details」的宽度和「Date of Birth」一致，就用相同的col-md-*值，不需要额外offset（除非上方元素本身有偏移）。

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