Bootstrap 5 流式容器内空间划分：如何在col-7+col-2下方排布4个区块

你之前对齐失败的核心原因是没有把右侧col-7 + col-2的区域作为独立的网格上下文处理，直接用Bootstrap原生的嵌套网格规则即可实现需求，无需额外自定义CSS。

推荐方案（嵌套网格，结构更合理） #

将左侧边栏和右侧全部内容拆分为外层行的两个并列列，右侧内容内部独立管理布局，完美对齐上方col-7 + col-2的边缘：

<div class="container-fluid">
  <div class="row">
    <!-- 左侧侧边栏：固定占3列 -->
    <div class="col-3">
      sidebar
    </div>
    <!-- 右侧内容总容器：占9列，内部嵌套独立网格 -->
    <div class="col-9">
      <!-- 右侧第一行：顶部滑块+大按钮 -->
      <div class="row">
        <div class="col-7">
          top slider
        </div>
        <div class="col-2">
          big button
        </div>
      </div>
      <!-- 右侧第二行：4个等宽区块 -->
      <div class="row row-cols-4 g-3">
        <div class="col">区块1</div>
        <div class="col">区块2</div>
        <div class="col">区块3</div>
        <div class="col">区块4</div>
      </div>
    </div>
  </div>
</div>

方案说明 #

• 外层行仅做左右二分，侧边栏和右侧内容区高度自动对齐，不会出现空白间隙
• 右侧内部网格独立计算宽度，row-cols-4会自动将当前行宽度平分为4份，4个区块自动适配宽度，和上方的col-7 + col-2左右边缘完全对齐
• 如需响应式适配，可将row-cols-4替换为row-cols-md-2 row-cols-lg-4，实现中等屏幕每行2个、大屏幕每行4个的展示效果

兼容你原有思路的方案 #

如果你坚持使用外层新增行的写法，只需要给第二行的9列内容区嵌套一层row row-cols-4即可：

<div class="container-fluid">
  <!-- 第一行 -->
  <div class="row">
    <div class="col-3">sidebar</div>
    <div class="col-7">top slider</div>
    <div class="col-2">big button</div>
  </div>
  <!-- 第二行 -->
  <div class="row">
    <div class="col-3"></div>
    <div class="col-9">
      <div class="row row-cols-4 g-3">
        <div class="col">区块1</div>
        <div class="col">区块2</div>
        <div class="col">区块3</div>
        <div class="col">区块4</div>
      </div>
    </div>
  </div>
</div>

该方案注意侧边栏高度如果高于右侧内容，会在第二行左侧出现空白区域，非特殊场景不推荐使用。

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