Question

我正在使用bootstrap前端框架。

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

在前两行的四列
第二个大栏目

下面的示例代码，但不起作用.. see 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%;    
}

您可以使用clear删除div中的左边距：

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

jsfiddle

或者用margin-right

替换所有这些div的左边距

Answer 2

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

Bootstrap，clear都不能正常工作

2 个答案: