html - Bootstrap，清除两者都不能正常工作

Question

我正在使用 Bootstrap 前端框架。

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

1. 前两行四列
2. 第二个大专栏

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

第一列新行左侧有padding

  <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 来完成此操作: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>