html - 引导程序，清除两者都无法正常工作

Question

我正在使用引导前端框架。

我想得到以下结果：两列：

1. 在四列的前两行
2. 第二个大柱子

下面的示例代码，但它不起作用..见 jsfiddle

新行左侧有填充到第一列

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

有什么建议么？

Answer 1

这是因为您使用：

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

和

.row-fluid [class*="span"] {
    margin-left: 2.127659574468085%;    
}

您可以使用以下命令从 div 中删除左边距clear：

<div style="clear: both; margin-left: 0px;" class="span3 tlo2 my_height_box">aabc</div>

jsfiddle

或者将所有这些 div 的左边距替换为margin-right

Answer 2

您应该使用嵌套row-fluid的 s 来完成此操作：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>