如何使用Bootstrap的col和row实现表单中文本域跨多列多行？

没问题，我来帮你搞定这个Bootstrap表单布局的需求！要让“Notes”文本域既横跨两列宽度又跨多行显示，我们可以利用Bootstrap的栅格系统（row/col）和textarea自身的属性来实现，下面是具体的步骤和代码示例：

核心思路 #

1. Bootstrap的栅格系统基于12列布局，我们通过调整文本域所在form-group的栅格类，让它占据对应数量的列数（比如两列col-md-4的宽度总和就是col-md-8），实现宽度上的跨列。
2. 给textarea添加rows属性，控制它的默认显示高度，实现内容层面的跨多行效果。
3. 使用Bootstrap专为表单优化的form-row代替普通row，能获得更紧凑的表单元素间距，适配表单场景。

代码示例 #

场景1：文本域与其他输入框在同一行，横跨后两列 #

如果你的布局是左侧有一个col-md-4的输入框，需要让Notes文本域占据右侧剩余的8列（刚好等同于两个col-md-4的宽度），可以用这个代码：

<form>
  <div class="form-row">
    <div class="form-group col-md-4">
      <label for="input-1">Input 1</label>
      <input id="input-1" class="form-control" type="text" name="input-1" placeholder="Input 1">
    </div>
    <!-- Notes文本域占据8列，对应横跨两列的宽度 -->
    <div class="form-group col-md-8">
      <label for="notes">Notes</label>
      <!-- rows="5"让文本域默认显示5行高度 -->
      <textarea id="notes" class="form-control" name="notes" rows="5" placeholder="Enter your notes here..."></textarea>
    </div>
  </div>
</form>

场景2：文本域单独一行，横跨两列宽度 #

如果希望Notes文本域单独占一行，且宽度等同于两个col-md-4的总和，可以这样写：

<form>
  <!-- 第一行：两个常规输入框 -->
  <div class="form-row">
    <div class="form-group col-md-4">
      <label for="input-1">Input 1</label>
      <input id="input-1" class="form-control" type="text" name="input-1" placeholder="Input 1">
    </div>
    <div class="form-group col-md-4">
      <label for="input-2">Input 2</label>
      <input id="input-2" class="form-control" type="text" name="input-2" placeholder="Input 2">
    </div>
  </div>

  <!-- 第二行：Notes文本域占据8列，对应两列的宽度 -->
  <div class="form-row">
    <div class="form-group col-md-8">
      <label for="notes">Notes</label>
      <textarea id="notes" class="form-control" name="notes" rows="5" placeholder="Enter your notes here..."></textarea>
    </div>
  </div>
</form>

额外说明 #

• 响应式适配：col-md-8是中等屏幕（≥768px）下的布局规则，在小屏幕上会自动变为全屏宽度；如果你想在所有屏幕尺寸都保持跨两列的宽度，可以换成不带断点的col-8类。
• 高度调整：你可以修改rows属性的数值（比如rows="3"或rows="6"），灵活控制文本域的默认显示高度。

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