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

Question

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

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

标签： htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design

Answer 1

Something like this should do..

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