Bootstrap技术咨询：列跨两行实现及特定页脚布局方案

一、如何让一个列占据两行高度？ #

在Bootstrap里，你有几种实用的实现方式，可根据布局场景灵活选择：

方法1：利用Flex布局的拉伸特性（最常用） #

如果你的布局是左侧单列 + 右侧两行的结构，只需给左侧列添加h-100类即可。因为Bootstrap的row默认是Flex布局，自带align-items: stretch属性，会让子元素高度自动拉伸至父容器的总高度。示例代码：

<div class="row">
  <!-- 左侧列：自动匹配右侧两行的总高度 -->
  <div class="col-4 bg-info p-4 h-100">
    这个列占据两行高度
  </div>
  <!-- 右侧的两行内容 -->
  <div class="col-8">
    <div class="row mb-3">
      <div class="col-12 bg-light p-4">右侧第一行</div>
    </div>
    <div class="row">
      <div class="col-12 bg-warning p-4">右侧第二行</div>
    </div>
  </div>
</div>

方法2：用CSS Grid实现跨行（更灵活） #

Bootstrap 5原生支持CSS Grid，如果你需要更精确的跨行控制，可以直接使用Grid的grid-row属性：

<!-- 定义一个2行2列的Grid布局 -->
<div class="d-grid" style="grid-template-columns: 1fr 3fr; grid-template-rows: auto auto; gap: 1rem;">
  <!-- 左侧列跨第1到第3行（即占据两行） -->
  <div class="bg-info p-4" style="grid-row: 1 / 3;">
    这个列占据两行高度
  </div>
  <div class="bg-light p-4">右上列</div>
  <div class="bg-warning p-4">右下列</div>
</div>

二、设计你需要的两行结构页脚 #

根据你的描述（第一行4列，最后一列填剩余；第二行1列宽度等于前3列总宽），用Flex布局就能轻松实现，无需复杂计算：

完整示例代码 #

<footer class="container py-4 border-top">
  <!-- 第一行：4列布局 -->
  <div class="d-flex mb-4 flex-wrap">
    <!-- 前3列的容器：固定宽度不收缩 -->
    <div class="d-flex flex-shrink-0">
      <div class="p-3 border me-2">列1</div>
      <div class="p-3 border me-2">列2</div>
      <div class="p-3 border">列3</div>
    </div>
    <!-- 最后一列：自动填满剩余空间 -->
    <div class="flex-grow-1 p-3 border ms-3">
      列4（填满剩余空白）
    </div>
  </div>

  <!-- 第二行：宽度自动匹配前3列总宽 -->
  <div class="border p-3" style="width: fit-content;">
    第二行内容（宽度与前3列总宽度一致）
  </div>
</footer>

关键细节说明： #

• flex-shrink-0：确保前3列的容器不会被压缩，始终保持自身宽度
• flex-grow-1：让最后一列自动填充行内剩余的所有空间
• width: fit-content：让第二行的容器自动适配前3列的总宽度，完美对齐

如果需要给前3列设置固定宽度（比如每列200px），只需给每个列添加w-25或自定义宽度类，第二行的fit-content会自动跟着适配。

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