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

您可能需要查看脚手架文档。听起来更像是您希望将行嵌套在右侧列中。

<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 堆叠。但是这样更干净。

Answer 2

你想使用这个.offset*类。在上述情况下，您需要使用.offset6使矩形浮动到最右边。

看offsetting columns这里：

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem