Bootstrap 5栅格布局问题：列元素错位下移

你的问题出在两个核心点：误用了d-inline-block类，且没遵循Bootstrap网格的标准结构，最终导致元素错位换行。

最优解决方案：使用Bootstrap标准网格结构 #

Bootstrap的col-6类是为配合row容器设计的，row作为flex容器会自动让列每行排列2个，完全不需要额外添加d-inline-block。修改后的代码如下：

<div class="row">
  <div style="height: 100px;" class="col-6 bg-success mt-40">1</div>
  <div style="height: 100px;" class="col-6 bg-success mt-40">2</div>
  <div style="height: 100px;" class="col-6 bg-success mt-40">3</div>
  <div style="height: 100px;" class="col-6 bg-success mt-40">4</div>
  <div style="height: 100px;" class="col-6 bg-success mt-40">5</div>
  <div style="height: 100px;" class="col-6 bg-success mt-40">6</div>
  <div style="height: 100px;" class="col-6 bg-success mt-40">7</div>
</div>

原代码出错的原因 #

1. d-inline-block的副作用：行内块元素默认垂直对齐方式是baseline，会导致视觉上的错位；同时HTML中div之间的空白字符会被解析为空格，两个col-6（各占50%宽度）加空格的总宽度超过100%，迫使第二个元素换行下移。
2. 违背Bootstrap网格设计逻辑：col-*类必须放在row容器内，row会自动处理列的间距和排列规则，不需要额外的行内块设置。

若必须保留d-inline-block的替代方案 #

如果因特殊需求必须使用行内块，需要解决两个问题：消除元素间空白字符、修正垂直对齐：

<!-- 用注释消除div间空白字符，同时设置vertical-align:top修正对齐 -->
<div style="height: 100px; vertical-align: top;" class="col-6 bg-success mt-40 d-inline-block">1</div><!--
--><div style="height: 100px; vertical-align: top;" class="col-6 bg-success mt-40 d-inline-block">2</div><!--
--><div style="height: 100px; vertical-align: top;" class="col-6 bg-success mt-40 d-inline-block">3</div><!--
--><div style="height: 100px; vertical-align: top;" class="col-6 bg-success mt-40 d-inline-block">4</div><!--
--><div style="height: 100px; vertical-align: top;" class="col-6 bg-success mt-40 d-inline-block">5</div><!--
--><div style="height: 100px; vertical-align: top;" class="col-6 bg-success mt-40 d-inline-block">6</div><!--
--><div style="height: 100px; vertical-align: top;" class="col-6 bg-success mt-40 d-inline-block">7</div>

不过仍优先推荐第一种方案，完全贴合Bootstrap的设计规范，后续维护也更简洁。

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