使用Bootstrap 5布局多层嵌套网格盒子的技术求助

核心规则先理清楚 #

Bootstrap网格基于12列系统，核心组件的作用：

• row：列的容器，默认是flex布局，让内部列水平排列；g-3是行的间距类，g代表gap，g-3表示列之间的间距为0.75rem（Bootstrap内置间距单位）
• col-md-6：
  • col：基础列类，小屏幕（宽度<768px）下默认占满整行（12份）
  • md：断点标识，代表屏幕宽度≥768px时生效该列的宽度设置
  • 6：占12列中的6份，也就是一半宽度，两个col-md-6就能实现水平等宽排列
• 嵌套逻辑：任意列（col）内部都可以再嵌套row和col，实现多层级的网格布局

实现需求的完整代码 #

<!-- 外层容器 Box "1" -->
<div class="container mt-4">
  <!-- 外层行：容纳Box A和Box B，g-3设置两列间距 -->
  <div class="row g-3">
    <!-- Box "A"：中等屏幕及以上占6份（等宽） -->
    <div class="col-md-6">
      <div class="border p-3 bg-light">
        Box "A"
        <!-- Box A内部行：容纳3个小盒子 -->
        <div class="row g-2 mt-3">
          <div class="col-md-4 border p-2 bg-white">Box "2"</div>
          <div class="col-md-4 border p-2 bg-white">Box "3"</div>
          <div class="col-md-4 border p-2 bg-white">Box "4"</div>
        </div>
      </div>
    </div>
    <!-- Box "B"：和Box A等宽 -->
    <div class="col-md-6">
      <div class="border p-3 bg-light">
        Box "B"
        <!-- Box B内部行：容纳3个小盒子 -->
        <div class="row g-2 mt-3">
          <div class="col-md-4 border p-2 bg-white">Box "5"</div>
          <div class="col-md-4 border p-2 bg-white">Box "6"</div>
          <div class="col-md-4 border p-2 bg-white">Box "7"</div>
        </div>
      </div>
    </div>
  </div>
</div>

代码关键点说明 #

• 外层container作为Box "1"的容器，mt-4是顶部间距类，避免内容贴顶
• 内部的col-md-4是因为12列÷3个盒子=4份，保证中等屏幕及以上三个小盒子各占1/3宽度，小屏幕下自动垂直堆叠
• 代码中的border、p-*（内边距）、bg-*（背景色）类是为了可视化盒子结构，实际使用可根据需求移除

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