html – Twitter Bootstrap – 2列布局

如何使用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>

哪个生成这个布局：

我想让蓝色矩形始终“在右边”,而不是留下.

我究竟做错了什么？

解决方法

您可能想要查看 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>

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