解决Bootstrap 3x3网格布局HTML表单因textarea导致的布局混乱

你遇到的布局混乱，是因为Bootstrap网格的浮动特性——当同一行内的列高度不一致时，下一行的列会填充到上一行的空隙中，textarea高度较高就会导致下方行错位。以下是两种实用的解决方法：

方案1：用.row包裹每行的3列 #

这是最规范的做法，把每一行的3个列都放在独立的.row容器里，让每行布局完全独立，不受其他行影响。

示例代码：

<form>
  <!-- 第一行 -->
  <div class="row">
    <div class="col-md-4">
      <input type="text" class="form-control" placeholder="输入框1">
    </div>
    <div class="col-md-4">
      <input type="text" class="form-control" placeholder="输入框2">
    </div>
    <div class="col-md-4">
      <input type="text" class="form-control" placeholder="输入框3">
    </div>
  </div>
  <!-- 第二行（包含textarea） -->
  <div class="row">
    <div class="col-md-4">
      <input type="text" class="form-control" placeholder="输入框4">
    </div>
    <div class="col-md-4">
      <input type="text" class="form-control" placeholder="输入框5">
    </div>
    <div class="col-md-4">
      <textarea class="form-control" rows="3" placeholder="多行文本框"></textarea>
    </div>
  </div>
  <!-- 第三行 -->
  <div class="row">
    <div class="col-md-4">
      <input type="text" class="form-control" placeholder="输入框6">
    </div>
    <div class="col-md-4">
      <input type="text" class="form-control" placeholder="输入框7">
    </div>
    <div class="col-md-4">
      <input type="text" class="form-control" placeholder="输入框8">
    </div>
  </div>
</form>

方案2：添加clearfix清除浮动 #

如果不想拆分多个.row，可以在每3列之后添加一个清除浮动的元素，强制下一行从新的位置开始。

示例代码：

<form>
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="输入框1">
  </div>
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="输入框2">
  </div>
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="输入框3">
  </div>

  <!-- 清除浮动，仅在中等/大屏幕生效 -->
  <div class="clearfix visible-md-block visible-lg-block"></div>

  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="输入框4">
  </div>
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="输入框5">
  </div>
  <div class="col-md-4">
    <textarea class="form-control" rows="3" placeholder="多行文本框"></textarea>
  </div>

  <!-- 清除浮动 -->
  <div class="clearfix visible-md-block visible-lg-block"></div>

  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="输入框6">
  </div>
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="输入框7">
  </div>
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="输入框8">
  </div>
</form>

注意事项 #

• 方案1更符合Bootstrap的布局规范，推荐使用；
• 方案2中的visible-md-block/visible-lg-block是为了适配响应式布局，小屏幕下网格会自动堆叠，不需要清除浮动。

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