如何让Bootstrap row不继承最高子列高度，利用矮列下方空白区域

问题说明 #

使用Bootstrap 5.2时，想要实现：第一行包含两个col-md-6列，在第一个列（ExampleTitle所在列）的正下方添加一个新的row，里面放置col-md-6元素，但实际布局不符合预期。

问题根源 #

你的代码中错误地将新的col-md-6直接嵌套在第一个row内部，没有创建独立的row容器。Bootstrap栅格要求每一行的列必须放在独立的row里，直接在现有row中添加列会导致布局错乱——单个row内的列总宽度超过12时会自动换行，但这不是你需要的“独立新行”效果。

修复后的完整代码 #

CSS 样式 #

.card2 {
  background: #2b2b2b;
  padding: 1rem 1.5rem;
  margin-bottom: 25px;
  border-radius: 16px;
}
body {
  background-color: #131313;
}
h1, h2, h3, h4, h5, h6, a, p {
  color: #fff;
}

HTML 结构 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <!-- 第一行：两个等宽列 -->
  <div class="row">
    <div class="col-md-6">
      <h2>ExampleTitle</h2>
      <div class="card2">
        <h4>ExampleItem1</h4>
        <p>Description</p>
      </div>
      <div class="card2">
        <h4>ExampleItem2</h4>
        <p>Description</p>
      </div>
      <div class="card2">
        <h4>ExampleItem3</h4>
        <p>Description</p>
      </div>
    </div>
    <div class="col-md-6">
      <h2>ExampleTitle2</h2>
      <div class="card2">
        <h4>Service1</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service2</h4>
        <p>Something that is a longer sentence and will occupy a new line so that they arent the exact same heights</p>
      </div>
      <div class="card2">
        <h4>Service3</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service4</h4>
        <p>Something</p>
      </div>
    </div>
  </div>

  <!-- 第二行：独立新行，放置目标列 -->
  <div class="row">
    <div class="col-md-6">
      <h2>ExampleTitle2</h2>
      <div class="card2">
        <h4>Service1</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service2</h4>
        <p>Something that is a longer sentence and will occupy a new line so that they arent the exact same heights</p>
      </div>
      <div class="card2">
        <h4>Service3</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service4</h4>
        <p>Something</p>
      </div>
    </div>
  </div>
</div>

核心要点 #

• Bootstrap栅格系统的核心规则：所有列必须包裹在row容器中，每个row对应一行独立的水平布局空间。
• 修复后，将需要放在ExampleTitle下方的列单独放入新的row，确保它作为独立一行展示，与第一行的列对齐，符合预期布局。

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