Bootstrap双栏布局教程与实现方法

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《Bootstrap 双栏布局构建指南》，聊聊，我们一起来看看吧！

本文详解如何在 Bootstrap 中正确实现嵌套网格（如左侧 8 列模块区 + 右侧 4 列日程区），解决因缺失父级 `.row`、列宽总和超限或未重置行间距导致的卡片错位、高度不一致等问题。

在 Bootstrap 中构建嵌套网格系统时，核心原则是：每一组 .col-* 必须严格包裹在 .row 内，且同一 .row 下所有列的 col-* 数值之和应为 12（或其倍数，依赖响应式断点）。你原始代码中存在多个关键问题：

• ❌ 缺失闭合标签（如
  未闭合，
  错位导致 DOM 结构混乱）；
• ❌ 在 .col-8 内部直接嵌套了未包裹在 .row 中的 .col-3 元素（Bootstrap 要求嵌套列必须位于新 .row 内）；
• ❌ 第二行卡片未添加垂直间距（如 mt-2），导致视觉上“挤在一起”，加剧高度不一致的错觉；
• ❌ 列宽设计不合理：col-3 × 4 = 12 是合法的，但你实际写了 3 个 col-3 后又嵌套了一个新 row（无父 .row），造成渲染异常。

✅ 正确做法如下：

1. 外层容器：使用 .container → .row 构建主栅格；
2. 左右分栏：.col-8（模块区） + .col-4（日程区）；
3. 模块区内嵌网格：每个 .col-8 子区域需新增 .row，再分配 .col-4（3 列/行，占满 12）；若需多行，每行独立 .row，并用 mt-2 等间距工具类分隔；
4. 日程区内嵌网格：同理，.row + 两个 .col-6 实现等宽双卡。

以下是结构清晰、语义完整、可直接运行的修复版代码：

<div class="container mt-4">
  <div class="row">
    <!-- 左侧模块区：占 8 列 -->
    <div class="col-8">
      <h3>Modules</h3>
      <div class="module-container">
        <!-- 第一行：3 张卡片 -->
        <div class="row g-3">
          <div class="col-4">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 1" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h5 class="card-title mb-2">Module A</h5>
                <p class="card-text text-muted small">Description</p>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 2" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h5 class="card-title mb-2">Module B</h5>
                <p class="card-text text-muted small">Description</p>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 3" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h5 class="card-title mb-2">Module C</h5>
                <p class="card-text text-muted small">Description</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 第二行：另 3 张卡片（带顶部间距） -->
        <div class="row g-3 mt-3">
          <div class="col-4">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 4" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h5 class="card-title mb-2">Module D</h5>
                <p class="card-text text-muted small">Description</p>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 5" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h5 class="card-title mb-2">Module E</h5>
                <p class="card-text text-muted small">Description</p>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 6" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h5 class="card-title mb-2">Module F</h5>
                <p class="card-text text-muted small">Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧日程区：占 4 列 -->
    <div class="col-4">
      <h3>Schedule</h3>
      <div class="row g-3">
        <div class="col-12">
          <div class="card h-100">
            <img src="/images/star.jpg" class="card-img-top" alt="Schedule 1" style="height: 100px; object-fit: cover;">
            <div class="card-body d-flex flex-column">
              <h5 class="card-title mb-2">Event A</h5>
              <p class="card-text text-muted small">Jun 12, 10:00 AM</p>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="card h-100">
            <img src="/images/star.jpg" class="card-img-top" alt="Schedule 2" style="height: 100px; object-fit: cover;">
            <div class="card-body d-flex flex-column">
              <h5 class="card-title mb-2">Event B</h5>
              <p class="card-text text-muted small">Jun 13, 2:30 PM</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

? 关键优化说明：

• 使用 g-3（gap）替代手动 mt-2，保证列间统一间距；
• 所有卡片添加 h-100 + d-flex flex-column，确保高度一致、内容垂直对齐；
• 图片统一设置 style="height: ...; object-fit: cover;" 防止拉伸变形；
• 每个 .row 内列宽总和严格为 12（如 col-4 × 3 或 col-12 × 2），避免 Bootstrap 自动换行或溢出；
• 移除冗余、未闭合的 HTML 标签，保障 DOM 清晰可靠。

? 小贴士：Bootstrap 5+ 不再默认为 .row 设置负边距（需配合 g-* 类控制间隙），因此务必使用 g-* 替代旧式 mx-n* + px-n* 组合，提升可维护性。

通过以上结构化嵌套，即可精准复现目标布局，并具备良好的响应式扩展能力（如在小屏下自动堆叠为单列）。

终于介绍完啦！小伙伴们，这篇关于《Bootstrap双栏布局教程与实现方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！