如何实现Bootstrap双Textarea与中间按钮垂直居中及响应式布局

问题成因 #

原有布局错位的核心原因是左右列总高度由「顶部提示文本+文本域」两部分组成，中间按钮列无顶部提示文本占位，栅格行默认顶部对齐规则会导致按钮组整体偏上，无法和文本域区域垂直居中。

修复代码 #

全程使用Bootstrap原生工具类实现，无需编写额外自定义CSS，天然兼容响应式规则：

<div class="container py-3">
  <div class="row">
    <!-- 左侧顶部提示 -->
    <div class="col-md-5">
      <div class="mx-2">
        <small class="text-muted">Tablas contenidas en el archivo.</small>
      </div>
    </div>
    <!-- 桌面端中间占位，对齐左右提示文本 -->
    <div class="col-md-2 d-none d-md-block"></div>
    <!-- 右侧顶部提示 -->
    <div class="col-md-5">
      <div class="mx-2">
        <small class="text-muted">Tablas seleccionadas.</small>
      </div>
    </div>
  </div>
  <div class="row align-items-center">
    <!-- 左侧文本域 -->
    <div class="col-md-5">
      <textarea rows="10" class="form-control w-100"></textarea>
    </div>
    <!-- 中间按钮组 -->
    <div class="col-md-2 d-flex flex-md-column flex-row justify-content-center gap-2 my-2 my-md-0">
      <button class="btn btn-secondary">btn</button>
      <button class="btn btn-secondary">btn</button>
      <button class="btn btn-secondary">btn</button>
      <button class="btn btn-secondary">btn</button>
    </div>
    <!-- 右侧文本域 -->
    <div class="col-md-5">
      <textarea rows="10" class="form-control w-100"></textarea>
    </div>
  </div>
</div>

实现逻辑 #

• 将原有单行栅格拆为两行：第一行单独承载顶部提示文本，桌面端中间列留空占位，保证左右提示文本水平对齐；第二行承载文本域和按钮组，给行添加align-items-center类，直接实现中间按钮组和左右文本域的垂直居中。
• 响应式规则适配：屏幕宽度小于md断点（768px）时，三列自动垂直堆叠，按钮组自动切换为横向居中排列，符合移动端操作逻辑。
• 细节优化：给文本域添加form-control类匹配Bootstrap默认表单样式，按钮组通过gap-2统一间距，替代原有零散的margin类定义。

极简兼容方案（不调整DOM结构） #

如果不想改动原有DOM层级，仅需给中间按钮列添加对应类即可快速对齐：

1. 给col-md-2的按钮列添加d-flex flex-column justify-content-center h-100类，让列内按钮组垂直居中
2. 给按钮列添加pt-4类，设置和顶部提示文本高度匹配的顶部内边距，抵消左右列提示文本的高度差

注意：该方案需要手动匹配内边距值和提示文本高度，适配灵活性不如拆分两行的方案。

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