我一直在尝试使用原始 Bootstrap 来实现这种布局,但对于我来说,我无法弄清楚。
经过几次迭代,所以我的标记还远未完成,但我希望图片能为有经验的前端提供足够的信息。
<style>
.potato{
background:blue;
border:1px solid black;
height:400px;
}
.paprika{
background:red;
border:1px solid black;
height:1200px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4 potato">
short box
</div>
<div class="col-md-4 potato">
short box
</div>
<div class="col-md-4 potato">
short box
</div>
<div class="col-md-4 potato">
short box
</div>
<div class="col-md-4 potato">
short box
</div>
<div class="col-md-4 paprika">
Long box
</div>
<div class="col-md-4 potato">
short box
</div>
<div class="col-md-4 potato">
short box
</div>
<div class="col-md-4 potato">
short box
</div>
</div>
</div>
最佳答案
这可以通过引导网格来完成(引用 https://getbootstrap.com/docs/4.0/layout/grid/),请参见此处的示例:https://getbootstrap.com/docs/4.0/examples/grid开始的一些代码。
关于html - 是否可以仅使用 Bootstrap 实现此布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54488531/