Bootstrap网格中自适应按钮布局问题求助

核心需求 #

• 按钮带内边距并填满所在容器的宽高
• 所有容器尺寸统一，自动适配最大按钮的高度
• 底部Close按钮的列宽与上方按钮列完全对齐

原代码问题点 #

1. 多组独立row未统一列数规则，导致列宽不一致
2. 按钮未设置填充容器的样式，无法占满col的宽高空间
3. Close按钮嵌套了额外的container，破坏了与外层container-fluid的宽度一致性
4. 行与行之间未配置统一的高度对齐逻辑，不同行的容器高度无法同步

修正后的实现代码 #

<div class="container-fluid">
  <!-- 第一行按钮组 -->
  <div class="row row-cols-3 gy-5">
    <div class="col p-2 border border-1 d-flex">
      <button class="btn btn-danger w-100 h-100 d-flex align-items-center justify-content-center">Button Row 1</button>
    </div>
    <div class="col p-2 border border-1 d-flex">
      <button class="btn btn-danger w-100 h-100 d-flex align-items-center justify-content-center">Button Row 1</button>
    </div>
    <div class="col p-2 border border-1 d-flex">
      <button class="btn btn-danger w-100 h-100 d-flex align-items-center justify-content-center">Button Row 1</button>
    </div>
  </div>

  <!-- 第二行按钮组 -->
  <div class="row row-cols-3 gy-5 mt-3">
    <div class="col p-2 border border-1 d-flex">
      <button class="btn btn-danger w-100 h-100 d-flex align-items-center justify-content-center">Button Row 2</button>
    </div>
    <div class="col p-2 border border-1 d-flex">
      <button class="btn btn-danger w-100 h-100 d-flex align-items-center justify-content-center">Button Row 2</button>
    </div>
    <div class="col p-2 border border-1 d-flex">
      <button class="btn btn-danger w-100 h-100 d-flex align-items-center justify-content-center">Button</button>
    </div>
  </div>

  <!-- Close按钮行 -->
  <div class="row row-cols-3 gy-5 mt-3">
    <div class="col p-2 border border-1 d-flex">
      <button class="btn w-100 h-100 d-flex align-items-center justify-content-center">Close</button>
    </div>
    <!-- 不需要空列可直接移除，保留是为了严格对齐列宽 -->
    <div class="col p-2 border border-1 d-flex invisible"></div>
    <div class="col p-2 border border-1 d-flex invisible"></div>
  </div>
</div>

关键修改说明 #

• 统一列宽：用row-cols-3强制每行分成3等宽列，确保所有列宽度完全一致
• 按钮填充容器：给按钮添加w-100 h-100实现宽高100%填充，d-flex align-items-center justify-content-center保证文本（包括换行后）始终居中
• 容器高度同步：给每个col添加d-flex，让同一行的容器自动适配该行最高按钮的高度
• 修正布局嵌套：移除Close按钮外层多余的container，保持与整体布局的宽度统一性
• 间距控制：gy-5控制行内列的垂直间距，mt-3控制行与行之间的间距

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