在 Bootstrap 5 中，若希望两个子元素在同一行内等宽（50%）并排显示，必须确保其父容器同时拥有 row 和 row-cols-2 类；仅用 row-cols-2 而缺少 row 会导致列堆叠。
在 bootstrap 5 中，若希望两个子元素在同一行内等宽（50%）并排显示，必须确保其父容器同时拥有 `row` 和 `row-cols-2` 类；仅用 `row-cols-2` 而缺少 `row` 会导致列堆叠。
要实现“整体居中、宽度占 10/12，内部再分为左右两个等宽并排区域”的典型布局，关键在于理解 Bootstrap 5 的栅格系统层级关系：
- 外层
.row控制水平排列与 gutters； -
.col-*类作用于直接子元素，定义列宽； -
row-cols-*是响应式工具类，需配合.row使用，它会自动为该行内所有直接子元素设置等宽列（如row-cols-2→ 每个子元素占 50% 宽度），但不会替代.row的布局功能。
你原代码中的问题在于：
<div class="row-cols-2"> <!-- ❌ 缺少 row 类，无法触发 flex 布局 -->
<div class="col">left</div>
<div class="col">Right</div>
</div>
该 <div> 没有 <code>row 类，因此不启用 Flexbox 排列，子元素默认按块级元素垂直堆叠。
✅ 正确写法如下（已整合进完整结构）：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><section class="slider-block slider-block-inv mb-0 pb-0 pb-md-5"><div class="container">
<div class="row justify-content-center">
<!-- 主内容区：居中 + col-10 -->
<div class="text-center col-10">
<h2 class="text-white">Title <span class="fw-bold">more</span>
</h2>
<strong style="color:#4EF4CB;">Session Title Goes Here:</strong>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<!-- 并排左右区域：必须同时添加 row + row-cols-2 -->
<div class="row row-cols-2 w-100 mt-4">
<div class="col bg-light p-3">left</div>
<div class="col bg-secondary text-white p-3">Right</div>
</div>
</div>
</div>
</section>
? 补充说明与最佳实践：
-
w-100确保内层行宽度撑满父容器（因外层.row默认有负 margin，而.col-10不覆盖全宽）； -
mt-4添加顶部间距，避免与上方内容紧贴； - 若需响应式控制（如移动端堆叠、桌面端并排），推荐使用
row-cols-sm-1 row-cols-md-2替代固定row-cols-2； - 不建议混用
.col与row-cols-*：前者需显式指定列数（如col-6），后者由父行统一控制子项数量，二者语义不同，应按需选择其一。
总结：Bootstrap 5 的栅格依赖严格的类组合逻辑——row-cols-* 是增强型工具类，绝不能脱离 row 独立生效。牢记「有 row 才有 row-cols」，即可避免绝大多数布局错位问题。
