html - 是否可以仅使用 Bootstrap 实现此布局？

Question

我一直在尝试使用原始 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>

Picture of what I am trying to do

Answer 1

这可以通过引导网格来完成(引用 https://getbootstrap.com/docs/4.0/layout/grid/)，请参见此处的示例:https://getbootstrap.com/docs/4.0/examples/grid开始的一些代码。