Bootstrap 4布局问题：无需嵌套Div，如何实现A左、B和C右的排列？

完全不用把B和C嵌套进额外的div，借助Bootstrap 4基于flexbox的网格系统，几行代码就能搞定这个布局需求。

核心思路 #

Bootstrap 4的.row本身就是flex容器，默认开启了flex-wrap: wrap，列元素会根据宽度自动换行。我们只需要给A分配左侧的固定宽度，给B和C分配右侧的剩余宽度即可。

实现代码 #

<div class="row">
  <!-- 左侧的A，中等屏幕及以上占4列 -->
  <div class="col-md-4 bg-light p-3">A</div>
  <!-- 右侧的B，占剩余8列 -->
  <div class="col-md-8 bg-primary text-white p-3">B</div>
  <!-- 右侧的C，同样占8列，自动换行到B下方 -->
  <div class="col-md-8 bg-secondary text-white p-3">C</div>
</div>

细节优化 #

如果希望左侧的A高度和右侧B+C的总高度保持一致，可以给.row加上align-items-stretch（其实默认就是这个值，不过显式写出来更清晰），再给A加上h-100类确保高度拉满：

<div class="row align-items-stretch">
  <div class="col-md-4 bg-light p-3 h-100">A</div>
  <div class="col-md-8 bg-primary text-white p-3">B</div>
  <div class="col-md-8 bg-secondary text-white p-3">C</div>
</div>

这个方案还自带响应式特性：在小屏幕（比如手机）上，所有元素会自动堆叠成垂直排列，完全符合Bootstrap的移动优先设计。

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