Bootstrap 4 - 向下移动行

Question

我一直在看Bootstrap文档，但我似乎无法找到能够发挥某种效果的课程。如果父行有一个推动底部div的列，有没有办法移动/偏移div Row？这可以用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上的col <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> 以及......

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

d-sm-block

• display:block在sm及以上显示行display:flex而不是float-left
• float-right和{{1}}将较高的列拉到右侧。

相关：Empty vertical space between columns in Bootstrap 4

Answer 2

您可以将两者放入一个sm-5 col中，如下所示：

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

如果您希望它自动检测并填充任何可用的垂直间隙，那么就没有办法做到这一点。您需要根据您的内容构建您的cols。

如果你想用较短的col来填充垂直间隙，那么你需要看一下使用flex。

https://getbootstrap.com/docs/4.1/utilities/flex/

<div class="container d-flex">
  <div class="col-sm-5">
    <div style="color: white; black; height: 300px">something</div>
    <div style="color: white; background:red; height: 300px">something</div>
  </div>
  <div class=col-sm-7">
    <div style="color: white; blue; height: 100%">something</div>
  </div>
</div>

Answer 3

不优雅，但如果您只想使用CSS，则可以在margin-top断点处添加否定sm。这将允许xs的单个全宽堆叠。

Codepen

<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 push-up" style="color: white; background:blue; height: 300px;">something</div>
    </div>
</div>

CSS

@media (min-width: 576px) {
    .col-sm-5.push-up {
        margin-top: -200px;
    }
}

Answer 4

如果您正在使用bootstrap 4，那么您正在寻找的解决方案可能就是Cards组件。 https://getbootstrap.com/docs/4.0/components/card/#card-columns。

**我只是把它放在评论中，但我还没有足够的代表。