如何在Bootstrap 4中设置按钮组，使单个按钮占据两行空间？

嘿，这个需求用Bootstrap 4的内置组件就能轻松搞定，完全不用写复杂的自定义样式！核心思路就是利用垂直按钮组结合弹性布局的拉伸属性，来实现单个按钮跨两行的效果，和计算器回车键的布局一模一样。

直接上实现代码，你可以复制过去试试：

<!-- 外层容器，可自定义宽度 -->
<div class="btn-group" style="width: 320px;">
  <!-- 左侧两行按钮组 -->
  <div class="btn-group-vertical flex-fill">
    <!-- 第一行按钮 -->
    <div class="btn-group">
      <button class="btn btn-primary">1</button>
      <button class="btn btn-primary">2</button>
      <button class="btn btn-primary">3</button>
    </div>
    <!-- 第二行按钮 -->
    <div class="btn-group">
      <button class="btn btn-primary">0</button>
      <button class="btn btn-primary">.</button>
      <button class="btn btn-primary">n</button>
    </div>
  </div>
  <!-- 跨两行的按钮，align-self-stretch让它高度铺满 -->
  <button class="btn btn-success align-self-stretch">E</button>
</div>

关键细节说明： #

• 外层的btn-group作为整体容器，给它设置宽度（或者让它自适应父容器），保证布局规整；
• 左侧用btn-group-vertical把两行按钮组垂直堆叠，flex-fill类让它自动占满容器的剩余宽度，和右侧按钮平分空间；
• 右侧的按钮添加align-self-stretch类，这个类会让按钮的高度自动匹配左侧垂直按钮组的总高度，完美实现“跨两行”的视觉效果；
• 如果需要调整按钮之间的间距，给按钮加上mx-1（水平间距）或者my-1（垂直间距）类就行，完全贴合Bootstrap的设计规范。

要是你需要更自定义的样式（比如按钮圆角、颜色），直接替换对应的Bootstrap按钮类就好，非常灵活！

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