如何使用Bootstrap实现按钮紧贴Textarea无间距排列

你之前使用no-gutters无效是因为该类仅适用于Bootstrap 4，Bootstrap 5已全面替换为g-*系列间距工具类，搭配原生弹性布局工具类即可实现需求，无需自定义CSS：

<div class="row g-0">
  <!-- 左侧按钮容器 -->
  <div class="col-md-1 d-flex flex-column gap-2 align-items-stretch">
    <button class="btn btn-primary flex-grow-1">Test1</button>
    <button class="btn btn-primary flex-grow-1">Test2</button>
  </div>
  <!-- 右侧文本域容器 -->
  <div class="col-md-11">
    <textarea class="form-control rounded-start-0" rows="4"></textarea>
  </div>
</div>

用到的Bootstrap原生类说明 #

• g-0：加在最外层row上，直接消除所有列的默认左右内边距，彻底解决列间隙问题
• d-flex flex-column：让左侧列转为垂直弹性布局容器，按钮自动垂直排列，无需额外嵌套row或<br>标签
• gap-2：控制两个按钮之间的垂直间距，可替换为gap-0到gap-5调整间距大小
• align-items-stretch + flex-grow-1：让两个按钮平分左侧容器高度，总高度与右侧文本域完全对齐
• rounded-start-0：去除文本域左侧圆角，实现按钮与文本域完全紧贴的视觉效果

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