Bootstrap 5左右列堆叠问题：实现居中col-10内两列平分

你的两列出现堆叠是因为两个关键错误：

• 分栏的行元素没有嵌套到目标col-10容器内，而是和col-10平级，导致它不受col-10的宽度约束，布局规则失效。
• row-cols-2需要配合row类使用，单独使用无法触发Bootstrap的栅格列布局逻辑。

修正后的代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<section class="slider-block slider-block-inv mb-0 pb-0 pb-md-5">
    <div class="container">
        <div class="row justify-content-center">
            <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, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
                <!-- 将分栏行嵌套到col-10内部，同时添加row类 -->
                <div class="row row-cols-2 mt-4">
                    <div class="col">left</div>
                    <div class="col">Right</div>
                </div>
            </div>
        </div>
    </div>
</section>

关键改动说明 #

1. 嵌套结构调整：把包含两列的row元素移动到col-10内部，确保所有内容都在你设定的居中宽度容器里。
2. 修复栅格类：将原有的row-cols-2改为row row-cols-2，row类是Bootstrap栅格布局的核心容器，row-cols-2用来指定该行默认每行显示2列，自动分配50%宽度。
3. 可选优化：添加mt-4类给分栏行增加顶部间距，避免和上面的文本过于拥挤，你可以根据需求调整这个间距类。

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