Question

我正在尝试在Bootstrap 4中建立网格，但是我不能完全使其正常工作。

我想使所有框“浮动”到顶部，但是如您所见，代码笔中的蓝色框粘在橙色框的下方，但我希望它向上移到红色框的上方。我还未能找到解决方法，所以我希望你们中的一些可以帮助我。：）

<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

引导程序4-对齐顶部

1 个答案: