如何使用Bootstrap实现列跨多行？Grid布局图片跨2行响应式问题

看起来你在Bootstrap的跨行布局和响应式图片处理上卡壳了，我来给你拆解下可行的方案，顺便帮你排查下可能的问题。

一、Bootstrap实现列跨多行的核心思路 #

Bootstrap的网格系统基于Flexbox，要实现列跨多行，主要有两种常用且稳妥的方式：

1. 嵌套行结构（最推荐的响应式方案） #

如果你的布局是「一列跨2行，另一列分成上下两个小模块」，可以通过在右侧列里嵌套垂直方向的row来实现，代码示例：

<div class="container">
  <div class="row g-4">
    <!-- 左侧列：跨2行，中等屏幕及以上占8列，小屏幕自动占满整行 -->
    <div class="col-md-8">
      <img src="你的图片地址" class="img-fluid h-100 rounded" alt="跨2行的图片">
    </div>
    <!-- 右侧列：嵌套行，分成上下两部分 -->
    <div class="col-md-4">
      <div class="row flex-column h-100 g-3">
        <div class="col">
          <div class="p-3 bg-light rounded">上半部分内容区域</div>
        </div>
        <div class="col">
          <div class="p-3 bg-light rounded">下半部分内容区域</div>
        </div>
      </div>
    </div>
  </div>
</div>

这里的关键细节：

• 给嵌套的flex-column行加上h-100，让它撑满父容器高度，确保上下两个小模块能平分高度
• 图片必须加img-fluid类，这是Bootstrap保证图片自适应容器宽度的核心；搭配h-100让图片填满左侧列的高度
• 用col-md-*这类响应式列类，确保在小屏幕下布局自动堆叠成单列，实现真正的响应式

2. 利用Bootstrap 5+原生Grid布局 #

如果你用的是Bootstrap 5，可以直接用它的原生Grid布局能力，通过定义网格区域实现跨行，代码示例：

<div class="container">
  <div class="grid" style="grid-template-areas:
    'img content-top'
    'img content-bottom';
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;">
    <div style="grid-area: img;">
      <img src="你的图片地址" class="img-fluid h-100 rounded" alt="跨2行图片">
    </div>
    <div style="grid-area: content-top;" class="p-3 bg-light rounded">上半部分内容</div>
    <div style="grid-area: content-bottom;" class="p-3 bg-light rounded">下半部分内容</div>
  </div>
</div>

要让这个布局响应式，需要配合媒体查询调整网格结构：

@media (max-width: 768px) {
  .grid {
    grid-template-areas:
      'img'
      'content-top'
      'content-bottom';
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}

二、解决你遇到的「图片跨2行但无响应式」问题 #

你说尝试了网上代码没效果，大概率是这几个原因：

• 没给图片加img-fluid类：这个类是Bootstrap图片自适应的核心，缺失会导致图片在小屏幕下溢出或变形
• 高度设置错误：用固定高度代替了相对高度（比如h-100），导致布局在不同屏幕尺寸下高度错乱
• 未使用响应式列类：只用了col而没加col-md-*，小屏幕下布局不会自动调整为单列

给你一个完整的可运行响应式示例，包含图片跨2行的完整逻辑：

<!DOCTYPE html>
<html>
<head>
  <!-- 必须引入Bootstrap核心CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .content-card {
      background-color: #f8f9fa;
      padding: 1.5rem;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="container my-5">
    <div class="row g-4">
      <!-- 左侧图片列 -->
      <div class="col-md-8">
        <img src="你的图片URL" class="img-fluid h-100 rounded" alt="跨两行的图片">
      </div>
      <!-- 右侧内容列 -->
      <div class="col-md-4">
        <div class="row flex-column h-100 g-4">
          <div class="col">
            <div class="content-card">
              <h5>上半部分标题</h5>
              <p>这里是上半部分的内容，会自动填满可用高度</p>
            </div>
          </div>
          <div class="col">
            <div class="content-card">
              <h5>下半部分标题</h5>
              <p>这里是下半部分的内容，同样自动填满剩余高度</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 可选：引入Bootstrap JS，用于交互组件 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

三、额外提示 #

• 确保你正确引入了Bootstrap的CSS文件，很多布局问题都是因为样式依赖缺失导致的
• 尽量避免使用固定高度的元素，优先用Bootstrap的h-*类（比如h-100、h-50）或弹性布局控制高度，才能保证响应式效果
• 如果你的原型有更复杂的布局逻辑，可以补充完整的代码或原型描述，我可以帮你进一步调整

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