html - 行在 Bootstrap 中被长列压低

Question

我正在尝试使用 bootstrap 制作这样的布局。

但是，我一直收到这个

有谁知道如何防止第二行被大列压下？

这是我的 HTML 框架:

<div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 about">
                <img >
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 resume">
                <img >
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 websites">
                <img >
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 waterfall">
                <img >
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 middlebox">
                <p id="middletext"><strong></strong><br></p>
            </div>
        </div>
</div>

这是相应的 CSS:

.col-xs-3{
    height: 33vh;
    margin-bottom: 3vh;
    padding: 0;
    border: 2px solid black;
}

.col-xs-3.resume{
    margin-top: 3vh;
}

.col-xs-3.websites{
    height: 60vh;
    margin-top: 3vh;
}

.col-xs-6{
    height: 33vh;
    margin-bottom: 3vh;
    padding: 0px;
    border: 2px solid black;
}

.col-xs-6.about{
    margin-top: 3vh;
}

Answer 1

这种无间隙布局的另一种选择是使用类似 Masonry 的东西，尽管如果您的实际布局与您的示例一样简单，这可能有点矫枉过正。