twitter-bootstrap Bootstrap，清除两者都无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17362921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap, clear both doesn't work properly
提问by breq
I'm using bootstrap front-end framework.
我正在使用引导程序前端框架。
I want to get the following result: two columns:
我想得到以下结果：两列：
- in the first two rows of four columns
- Second one large column
- 在四列的前两行
- 第二个大专栏
The sample code below, but it does not work .. see jsfiddle
下面的示例代码，但它不起作用..见 jsfiddle
There is padding on the left side in the new row to the first column
新行左侧有填充到第一列
<div class="row-fluid">
<div class="span7 tlo">
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
<div style="clear: both;" class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
</div>
<div class="span5 tlo2">
<h1>AWESOME extra text!</h1>
<h2>THIS i s really C00L</h2>
<h3>My files, my problems ;)</h3>
</div>
</div>
Any suggestions?
有什么建议？
采纳答案by Michal
You should use nested row-fluids to accomplish this: http://jsfiddle.net/QQRN4/7/
您应该使用嵌套row-fluids 来完成此操作：http: //jsfiddle.net/QQRN4/7/
<div class="row-fluid">
<div class="span7 tlo">
<div class="row-fluid">
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
</div>
<div class="row-fluid">
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
<div class="span3 tlo2 my_height_box">aabc</div>
</div>
</div>
<div class="span5 tlo2">
<h1>AWESOME extra text!</h1>
<h2>THIS i s really C00L</h2>
<h3>My files, my problems ;)</h3>
</div>
</div>
回答by YD1m
It's because you use:
这是因为你使用：
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
and
和
.row-fluid [class*="span"] {
margin-left: 2.127659574468085%;
}
You can remove left margin from div with clear:
您可以使用clear以下命令从 div 中删除左边距：
<div style="clear: both; margin-left: 0px;" class="span3 tlo2 my_height_box">aabc</div>
Or replace left margin from all this divs with margin-right
或者将所有这些 div 的左边距替换为 margin-right
