BootStrap4如何生成左边2列，右边3列的布局？

Question

我想要如上图的效果，下面代码的效果不太符合（没有铺满，而且短了一截）该如何改呢？大佬们

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-12">左边第一行</div>
      </div>
      <div class="row">
        <div class="col-md-12">左边第二行</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-12">右边第一行</div>
      </div>
      <div class="row">
        <div class="col-md-12">右边第二行</div>
      </div>
      <div class="row">
        <div class="col-md-12">右边第三行</div>
      </div>
    </div>
  </div>
</div>

Answer 1

外部容器，也就是 .container-fluid 元素设置 display:flex; align-items:stretch 即可。
但是 .row 元素的宽度可能会丢失，所以你在单独调整一下 .row 元素的宽度就行。具体看你需求了是要平分，还是按照百分比分配 或者 固定值。

具体更多 flex 布局的教程看这篇文章👉 Flex 布局教程：语法篇 - 阮一峰的网络日志