Twitter Bootstrap：ネストされた行？

Twiter Bootstrap質問：以下の画像を与えて、3つの赤い容器を液体で反応性のあるものにするにはどうすればいいですか？ span*の中にコンテナ/行を定義することはできますか？そのようなレイアウトにどのように取り組むべきか分かりません。Twitter Bootstrap：ネストされた行？

コンテナ流体
行流体
span9
行流体
span3 span3 span3

：

enter image description here

出典

2012-11-19 StackOverflowNewbie

ニート図について[流体グリッドシステム部（http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem） – Sherbrow

Upvoteで*流体ネスト*約DOC協議：O） – maasha

@ Sherbrow、私はここに書かれています。なぜなら、この文書では行が複雑なネスティングの例を示しておらず、このユースケースでは完全にはっきりしていないからです。 – Renee

は、この入れ子の順番を試してみました

出典

2012-11-19 22:20:06

もちろん、他のスパン内の行を好きなだけ深く入れ子にすることができます。

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span9"> 
      <div class="span4"></div> 
      <div class="span4"></div> 
      <div class="span4"></div> 
     </div> 
     <div class="span3"></div> 
    </div> 
</div>

9行内の3つのコンテナで動作するはずです。

出典

2012-11-19 22:24:11

[docs]（http://twitter.github.com/bootstrap/scaffolding.html）は、内部の '.span4'sを' .row-fluid'にラップすることを推奨しています。実際には不要なので意図的に省略しましたか、それとも単なる見落としですか？ –

ええと、それはスパン3ではないでしょうか？ – alex

@alex流体グリッドは異なった働きをします。入れ子にされた各レベルの列は、最大12の列を追加する必要があります。これは、流体グリッドが幅を設定するためにピクセルではなくPERCENTAGESを使用するためです。上記の例は完璧です。なぜなら、あなたが9の中に12を収めるパーセンテージだからです。私は、この問題に関するブートストラップのドキュメントは貧弱だと思います。 – Labanino

行を行内にネストできますが、マークアップが正しいことを確認する必要があります。

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span9"> 
      <div class="row-fluid"> 
       <div class="span4">...</div> 
       <div class="span4">...</div> 
       <div class="span4">...</div> 
      </div> 
     </div> 
     <div class="span3">...</div> 
    </div> 
</div>

この例のリンクを参照してください。 HTMLとResultビューの間で垂直バーを動かしてみると、反応レイアウトがそこで動作するようになります。 Three Responsive columns with Twitter Bootstrap

出典

2013-01-14 12:38:28

Twitter Bootstrap：ネストされた行？

答えて

関連する問題