Twitterowy numer początkowy z opaskami

Question

Używam twitter bootstrap, próbuję dowiedzieć się, dlaczego ostatnia "kolumna" owija się.

<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> 

Skutkuje:

A B C 
D 
___________ 

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

więc wszelkie pojęcia, dlaczego to zawija?

Próbuję tworzyć formularze wielokolumnowe i chciałbym uporządkować kolumny i wiersze.

Dziękuję.

EDYCJA: dodanie style="width:auto" do wiersza rozwiązuje problem, ale dlaczego zawija szerokość domyślną 300px?

Answer 1

Masz rację, że span4 ma 300px, ale uważam, że w Twoim kodzie HTML wystąpił błąd.

Musisz zawinąć zagnieżdżone kolumny w nowej klasie .row. Kiedy to zrobisz, zawijanie zostanie zatrzymane. Zobacz http://jsfiddle.net/panchroma/UBTv4/ dla i przykład przy użyciu domyślnej (niepłynnej) siatki Bootstrap.

To HTML Użyłem:

<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 --> 

Dla stałych sieci, liczba kolumn w zagnieżdżonej rzędzie należy dodać do liczby colums w kolumnie macierzystej (np cztery w tym przypadku)

Jeśli używasz siatki płynów (tj wiersz płynów), liczba kolumn w zagnieżdżonej rzędzie powinna wynosić 12.