行在引导程序中被长列向下推答案

【问题标题】：rows getting pushed down by long column in bootstrap行在引导程序中被长列向下推
【发布时间】：2014-08-04 01:16:32
【问题描述】：

我正在尝试使用引导程序制作这样的布局。

但是，我不断收到这个

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

这是我的 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;
}

【问题讨论】：

分享你的一些代码。
嵌套是你的朋友。

标签： html css twitter-bootstrap layout formatting

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

为什么在宽度为 9 的父 div 中使用列宽 8 和 4？嵌套行时，它会创建一个仍然有 12 列的子网格吗？
是的，父div的宽度是一个12列的网格，我用8和4来保持你之前的6和3 div的比例
非常感谢！不过还有一个问题。我从 div 中取出所有内容并对其进行样式设置，以便仅显示边框。我试图在上面的问题中重新创建图片以确保布局正确。现在所有的框都在顶行相互重叠，并且没有响应我移动它们的尝试。
你的意思是你删除了每个 div 中的所有 img，文本，如下所示：jsfiddle.net/c383Y ？对我来说似乎没问题
感谢您的帮助。我可能只是在某个地方犯了一个愚蠢的错误。