我有一个3列布局的网站,我希望我的中间列有一个不同的高度比侧列,然后我有2列的第二行,我有左拉和右推,我想出现在旁边的大中间列,但我总是得到我的大中间列下面的第二行。我正试图找出如何使用引导做到这一点。有什么建议吗?
我尝试浮动中间列,并浮动整个行,我似乎不能让它工作,因为第二行总是清除第一行,所以它清除整个中心列。
我希望我说得很清楚。基本上我的代码看起来像这样,(我删除php为wp)<div class="row">
<div id="contentWrap1" class="col-sm-3">
<h3>Acerca de CIPM</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
</div>
<div id="contentWrap2" class="col-sm-4 col-sm-offset-1">
//content
//ths is the column that I want to be longer than the others because it contains many posts
</div>
<div id="contentWrap3" class="col-sm-3 col-sm-offset-1">
<h3>Código de Etica</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
</div>
</div>
//now this is the second row that is displaying beneath the first one, however high the center column is, but i would like it to display up next to the center column, with the next #contentWraps on either side. Almost as if te content had 2 sidebars on each side, except i split them up this way for the responsive layout
<div class="row">
<div id="contentWrap4" class="col-sm-3 pull-left" style="float:left; clear: none;">
<h3>Quicklinks</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
</div>
<div id="contentWrap5" class="col-sm-3 pull-right">
<h3>External Newsfeed</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
</div>
</div>
不把这个布局看成两行,而是一行三列,每一列都有自己的顶部&底部分。
<div class="row">
<div id="left-col" class="col-sm-4">
<div id="top-left"></div>
<div id="bottom-left"></div>
</div>
<div id="middle-col" class="col-sm-4">
<div></div>
</div>
<div id="right-col" class="col-sm-4">
<div id="top-right"></div>
<div id="bottom-right"></div>
</div>
</div>