引导4-对齐到顶部

Question

我正试图在Bootstra4中建立一个网格，但我无法完全实现它的工作。

我想让所有的盒子“漂浮”到顶部，但是正如你所看到的，代码中的蓝色盒子粘在橙色盒子下面，但是我想让它向上移动到红色的盒子上。我还没有找到我该怎么做，所以我希望你们中的一些人能帮助我。:)

<div class="container">
  <div class="row align-items-start">
    <div class="col-8">
      <div class="main-content bg-red"></div>
    </div>
    <div class="col-4">
      <div class="side-one bg-yellow"></div>
      <div class="side-two bg-orange"></div>
    </div>
    <div class="offset-4 col-4">
      <div class="bottom-one bg-blue"></div>
    </div>
  </div>
</div>

https://codepen.io/jeroenknol/pen/yxdajW

Answer 1

我已经想好了，我把蓝色的块和主内容放在了col-8块中，这就奏效了。

<div class="container">
  <div class="row align-items-start">
    <div class="col-8">
      <div class="main-content bg-red"></div>
      <div class="offset-6 col-6 bottom-one bg-blue"></div>
    </div>
    <div class="col-4">
      <div class="side-one bg-yellow"></div>
      <div class="side-two bg-orange"></div>
    </div>
  </div>
</div>

https://codepen.io/jeroenknol/pen/JaQbWr