在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之类的东西，尽管如果你的实际布局和你的例子一样简单，那可能有点过分了。

Answer 2

我能想到的一种方法是使用一个div作为前两列的父级：

HTML：

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

CSS

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

.resume{
    margin-top: 3vh;
}

.websites{
    height: 68vh;
    margin-top: 3vh;
    border: 2px solid black;
}

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

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