html - Bootstrap - 如何将列高设置为多行？

Question

我有一个需要为桌面创建的 Bootstrap 图像网格，您可以在下面看到布局。

我遇到的问题是中心框超过两行，所以我不知道如何实现它。可能是新手问题，但非常感谢您的帮助!

Answer 1

像这样的事情应该做..

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">1</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="well">3
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="well">6</div>
    </div>
    <div class="col-md-6">
        <div class="well">7</div>
    </div>
</div>