Bootstrap Grid System无法按列显示，如何实现三列网格布局？

嘿，我来帮你搞定这个网格布局的问题！你遇到的情况其实是Bootstrap网格最常见的坑之一——没有遵循「容器→行→列」的层级结构，或者漏了关键的网格类。

先给你一个能直接运行的正确示例 #

<!-- 务必在<head>里引入Bootstrap CSS（这里用的是Bootstrap 5的CDN，你也可以用本地文件） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<!-- 核心结构：容器 → Jumbotron → 行 → 三列 -->
<div class="container">
  <!-- Jumbotron 区域 -->
  <div class="jumbotron bg-light p-5 rounded">
    <h1 class="display-4">我的页面标题</h1>
    <p class="lead">这是Jumbotron的描述文本，用来突出展示内容</p>
  </div>

  <!-- 三列布局的行 -->
  <div class="row g-4"> <!-- g-4是列之间的间距，可选 -->
    <div class="col-md-4">
      <h3>第一列</h3>
      <p>这里是第一列的内容，在中等屏幕及以上会和另外两列并排，小屏幕会自动堆叠成一行。</p>
    </div>
    <div class="col-md-4">
      <h3>第二列</h3>
      <p>这里是第二列的内容，Bootstrap的网格系统基于12份宽度，col-md-4就是占4份，三列刚好12份。</p>
    </div>
    <div class="col-md-4">
      <h3>第三列</h3>
      <p>这里是第三列的内容，如果想要在所有屏幕都并排，把col-md-4改成col就可以了，它会自动均分宽度。</p>
    </div>
  </div>
</div>

关键要点（你之前可能踩的坑） #

• 必须嵌套正确的层级：所有列（col-*）必须放在.row里面，而.row必须放在.container或.container-fluid里面。没有容器的话，row的负margin和列的padding都不会生效，列会默认变成块级元素占满整行。
• 不要漏写列宽度类：比如只写<div class="col">在Bootstrap 4/5里是可以的（自动均分），但如果是旧版本（比如Bootstrap 3）必须指定col-xs-4这类的类，否则列不会并排。
• 确认Bootstrap CSS已正确引入：如果没引入或者路径错了，网格类完全不会生效，列自然会每行占100%宽度。

排查你之前的错误 #

你说尝试过嵌套Row但没成功，大概率是下面两种情况：

1. Row没有放在Container里面，导致布局间距混乱；
2. 列的类名写错了，比如用了col-4但在小屏幕测试，或者漏了col前缀。

按照上面的示例调整后，应该就能正常显示Jumbotron加三列并排的布局了！

内容的提问来源于stack exchange，提问作者B. Sommer