求助：如何在Bootstrap 4中实现该类网格布局样式？

嘿，我刚好对Bootstrap 4的网格布局熟得很！看你提到的网格样式，应该是那种左列一个高区块、右列两个上下排列矮区块的不对称布局吧？如果是这样的话，用Bootstrap 4的原生栅格系统就能搞定，几乎不用额外写CSS，给你贴个完整的实现代码参考：

<div class="container my-4">
  <div class="row">
    <!-- 左列大区块 -->
    <div class="col-md-8">
      <div class="p-5 bg-light border h-100">
        这里是左列大内容区块
      </div>
    </div>

    <!-- 右列嵌套两个小区块 -->
    <div class="col-md-4">
      <div class="row h-100">
        <div class="col-12 mb-3 flex-fill">
          <div class="h-100 p-4 bg-light border">
            右列上区块
          </div>
        </div>
        <div class="col-12 flex-fill">
          <div class="h-100 p-4 bg-light border">
            右列下区块
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

• 用.container做外层容器，.my-4是上下间距的辅助类，让布局更美观；
• 外层.row是flex容器，默认会让左右两列等高；
• 右列里嵌套了一个.row h-100，确保嵌套的行占满父列的高度，再给两个子列加flex-fill，就能让它们自动平分高度，和左列的大区块高度对齐；
• .p-*是内边距辅助类，.bg-light和.border是用来区分区块的样式，你可以换成自己的定制样式。

如果你的目标网格样式不是这种，比如是多列错落或者其他特殊排列方式，可以再详细描述下具体的布局逻辑，我再给你调整方案～

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