html - Twitter Bootstrap - 2 列布局

Question

如何使用 Twitter Bootstrap 制作 2 列布局？我使用这个方案:

<div class="container">         
  <div class="row">
    <div class="span2"> 
      Red rectangle
    </div>
    <div class="span6">
      Blue rectangle
    </div>
    <div class="span6">
      Blue rectangle
    </div>
    <div class="span6">
      Blue rectangle
    </div>
    <div class="span6">
      Blue rectangle
    </div>
  </div>
</div>

生成此布局:

我希望蓝色矩形始终“在右边”，而不是在左边。

我做错了什么？

Answer 1

您可能想要查看 scaffolding documentation .这听起来更像是您希望行嵌套在右手列中。

<div class="container">         
  <div class="row">

    <div class="span2"> 
      Red Rectangle
    </div>

    <div class="span6">
      <div class="row">
        <div class="span6">
          Blue Rectangle
        </div>
      </div>
      <div class="row">
        <div class="span6">
          Blue Rectangle
        </div>
      </div>
      <div class="row">
        <div class="span6">
          Blue Rectangle
        </div>
      </div>
      <div class="row">
        <div class="span6">
          Blue Rectangle
        </div>
      </div>
    </div>

  </div>
</div>

实际上可能没有必要将每个蓝色矩形包裹在一个“行”div 中，它们应该堆叠在 span6 中。但这样更干净。