我一直在查看 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>
最佳答案
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
将较高的列拉到右边。
关于css - Bootstrap 4 - 将行向上移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50262922/