如何用Bootstrap实现指定响应式网格布局（布局错位问题）

嘿，作为Bootstrap老玩家，我一眼就看出问题在哪啦！你想要的布局里，中间区域的X和Y应该是垂直堆叠的，但你原来的代码里用了row和两个col，导致它们在中间列里水平并排了，这就和目标布局不符啦。

来，给你调整好的代码：

<div class="container">
  <div class="row">
    <!-- 左侧A区域 -->
    <div class="col-12 col-lg-4">
      A
    </div>
    <!-- 中间X、Y垂直区域 -->
    <div class="col-12 col-lg-4">
      <div class="mb-3">X</div> <!-- mb-3用来给X和Y之间加间距，可根据需求调整 -->
      <div>Y</div>
    </div>
    <!-- 右侧B区域 -->
    <div class="col-12 col-lg-4">
      B
    </div>
  </div>
</div>

关键调整点： #

• 去掉了中间列里嵌套的row和col，直接把X和Y放在中间的col-12 col-lg-4里，这样它们就会垂直排列
• 加了mb-3类给X，让X和Y之间有合适的间距，你可以换成mb-2、mb-4来调整间距大小
• 整个布局放在container里（如果需要全屏宽度可以换成container-fluid），保证内容有合适的边距

如果需要给X、Y、A、B加样式区分（比如背景色、边框），可以给它们加上p-3 bg-light border这类辅助类，比如：

<div class="col-12 col-lg-4 p-3 bg-light border">A</div>

这样就能更清晰地看到布局效果啦！

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