如何使用Bootstrap 5实现参考图中的网格布局 现有代码无法生效

问题原因 #

你现有代码的问题在于嵌套行和父列的结构逻辑不符合预期，未处理默认槽距导致的样式偏移，且右侧列的内容结构拆分不对。

正确实现代码 #

<div class="container-fluid">
  <div class="row">
    <!-- 左侧等高二分之一列 -->
    <div class="col-md-6" style="background-color: palegreen; min-height: 80px;">.col-md-6</div>
    <!-- 右侧二分之一列，内部拆分结构 -->
    <div class="col-md-6">
      <!-- 右侧顶部红色区域 -->
      <div style="background-color: red;">.col-md-6</div>
      <!-- 嵌套行拆分8:4比例 -->
      <div class="row g-0">
        <div class="col-md-8" style="background-color: purple;">.col-md-8</div>
        <div class="col-md-4" style="background-color: aqua;">.col-md-4</div>
      </div>
    </div>
  </div>
</div>

关键调整说明 #

• 把右侧红色区域和嵌套行拆分到两个独立容器，避免红色背景覆盖嵌套行区域
• 新增g-0类取消嵌套行的默认槽距，更贴合纯色块演示效果，如果你需要保留默认间距去掉这个类即可
• 左侧列增加min-height保证左右列高度对齐，你也可以根据实际需求调整高度值，或者给父级row添加align-items-stretch类实现自动等高

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