スパンラップ付きTwitterブートストラップ行

Question

Twitterのブートストラップを使用して、最後の「列」が折り返される理由を理解しようとしています。

<div class="row span4 solidBottom"> 
     <div class="span1"> 
      <label>A</label> 
     </div> 
     <div class="span1"> 
      <label>B</label> 
     </div> 
     <div class="span1"> 
      <label>C</label> 
     </div> 
     <div class="span1"> 
      <label>D</label> 
     </div> 
</div> 

それは、その結果：それはラップ理由として

A B C 
D 
___________ 

SPAN 4 = 300px 
Four Span1s = 240 
3 Paddings = 60 
240 + 60 = 300 

だから、任意の手掛かり？

私は複数の列フォームを作成しようとしており、列と行を整理したままにしたいと考えています。

ありがとうございます。

EDIT：行にstyle="width:auto"を追加すると問題は解決しますが、なぜ300pxのデフォルト幅が折り返されますか？

Answer 1

span4は300pxですが、あなたのHTMLにはエラーがあると思います。

新しいネストされた列を新しい.rowクラスにラップする必要があります。これを行うと、ラッピングが停止します。たとえば、デフォルトの（流体でない）ブートストラップグリッドを使用する場合は、http://jsfiddle.net/panchroma/UBTv4/を参照してください。

これは私が使用したHTMLです：固定グリッドの

<div class="container"> 

<div class="row"> 
    <div class="span4 solidBottom"> 

     <div class="row"> 
      <div class="span1"> 
       <label>A</label> 
      </div> 

      <div class="span1"> 
       <label>B</label> 
      </div> 

      <div class="span1"> 
       <label>C</label> 
      </div> 

      <div class="span1"> 
       <label>D</label> 
      </div> 

     </div> <!-- end nested row --> 

     <div class="span8"> </div> 

    </div> <!-- end parent row --> 
</div> <!-- end container --> 

、ネストされた行の列数が、この場合、親列（つまり4人にcolumsの数まで追加する必要があります）

あなたは流体グリッド（すなわち行-流体）を使用している場合は、ネストされた行の列数が12