css - Bootstrap 4 - 将行向上移动

Question

我一直在查看 Bootstrap 文档，但我似乎找不到实现特定效果所需的类。如果父行有一个将底部 div 向下推的列，是否有办法移动/偏移 div 行？这有可能通过 Bootstrap 实现吗？我附上了我要完成的工作的图像以及代码。

<div class="container">
<div class="row">
    <div class="col-sm-5" style="color: white; background:black; height: 100px">Something</div>
    <div class="col-sm-7" style="color: white; background:red; height: 300px">something</div>
</div>
<div class="row">
    <div class="col-sm-5" style="color: white; background:blue; height: 300px; position: top">something</div>
</div>

Answer 1

Bootstrap 4 .row 是 flexbox，所以所有的 col-* 都是最高列的高度。因此，您需要 float- sm 及以上的列...

https://www.codeply.com/go/CuWAXOF6Gs

<div class="container">
    <div class="row d-sm-block">
        <div class="col-sm-5 float-left" style="color: white; background:black; height: 100px">something</div>
        <div class="col-sm-7 float-right" style="color: white; background:red; height: 300px">something</div>
        <div class="col-sm-5 float-left" style="color: white; background:blue; height: 300px; position: top">something</div>
    </div>
</div>

• d-sm-block 使 display:block 行代替 display:flex 在 sm 及以上
• float-left 和 float-right 将较高的列拉到右边。

相关:Empty vertical space between columns in Bootstrap 4