Bootstrap布局求助：如何使两行总宽一致且第二行分为两区块

需求说明 #

• 第一行在xl、lg、md屏幕尺寸下，通过col-xl-11、col-lg-11、col-md-11类占据11列宽度并居中显示
• 第二行总宽度需与第一行完全一致，拆分为一个4列宽度的区块和一个5列宽度的区块（前者宽度小于后者）

原问题代码 #

<div class="row d-flex justify-content-center">
  <div class="col-xl-11 col-lg-11 col-md-11  overflow-auto">
    overview <br />
    overview <br />overview <br />overview <br />overview <br />overview
    <br />overview
  </div>
</div>

<div class="row d-flex justify-content-between">
  <div class="col-xl-4 col-lg-4 col-md-12  overflow-auto">tes</div>

  <div class="col-xl-5 col-lg-5 col-md-12  overflow-auto">
    <br />overview <br />overview <br />overview <br />overview
    <br />overview <br />overview <br />overview <br />overview
  </div>
</div>

问题原因 #

原代码中第二行直接使用justify-content-between的row放置col-xl-4和col-xl-5，导致第二行总宽度为9列，且未和第一行保持相同的居中对齐逻辑，因此无法匹配第一行的宽度。

修正后的代码 #

<!-- 第一行布局 -->
<div class="row d-flex justify-content-center">
  <div class="col-xl-11 col-lg-11 col-md-11 overflow-auto">
    overview <br />
    overview <br />overview <br />overview <br />overview <br />overview
    <br />overview
  </div>
</div>

<!-- 第二行布局（与第一行宽度对齐） -->
<div class="row d-flex justify-content-center">
  <div class="col-xl-11 col-lg-11 col-md-11">
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-12 overflow-auto">tes</div>
      <div class="col-xl-5 col-lg-5 col-md-12 overflow-auto">
        <br />overview <br />overview <br />overview <br />overview
        <br />overview <br />overview <br />overview <br />overview
      </div>
    </div>
  </div>
</div>

说明 #

1. 第二行沿用第一行的外层结构：通过justify-content-center的row包裹col-xl-11容器，确保总宽度和第一行一致且居中
2. 在col-xl-11容器内嵌套row，再放置两个子区块，这样col-xl-4和col-xl-5会基于11列的宽度分配空间，满足宽度比例要求
3. md及以下屏幕尺寸下，两个子区块自动堆叠，保留原响应式逻辑

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