3

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>

このレイアウトを生成するもの： ここに画像の説明を入力してください

青い長方形を常に「左側」ではなく「右側」に配置したいと思います。

私は何が間違っているのですか？

4

2 に答える 2

11

足場のドキュメントを確認することをお勧めします。右側の列の中に行をネストしたいように聞こえます。

<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でスタックする必要があります。しかし、この方法でよりクリーンになります。

于 2013-01-09T02:21:07.350 に答える
1

.offset*クラスを使用したい。上記の場合、.offset6長方形を右端に浮かせるのに使用する必要があります。

ここを参照offsetting columnsしてください：

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

于 2013-01-09T02:12:26.633 に答える