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

您可能想查看脚手架文档.听起来更像是想要在右手栏中嵌套行.

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

实际上可能没有必要将每个蓝色矩形包装在"row"div中,而span6应该堆叠.但它的清洁方式如此.