html - 是否可以仅使用引导程序来实现此布局？

Question

我一直在尝试使用原始引导程序来实现这种布局，但对于我的生活，我无法弄清楚。

经历了几次迭代，所以我的标记还远未完成，但我希望这张图片能为有经验的前端提供足够的信息。

 <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>

我正在尝试做的事情的图片

标签： htmlcss

Answer 1

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