Siatka Bootstrap na Twitterze nie działa zgodnie z oczekiwaniami

Question

Używam motywu Wordpress na podstawie Bootstrap na Twitterze. Temat nazywa się StrapPress. Po prostu ruszam z siatką i próbuję ustawić wszystko w bardzo prosty sposób, ale siatka działa w dziwny sposób. Czego chcę, to główna sekcja treści złożona z dziewięciu kolumn i bocznego paska trzech. W dziewięciu kolumnach chcę mieć kolumny zagnieżdżone z różnymi obszarami treści: na jednej stronie pierwsza sekcja będzie zawierała całe dziewięć kolumn, a zawartość poniżej zostanie podzielona na trzy równe sekcje.

Poniższy kod ustawia go dobrze bez pierwszego odcinka w 9 kolumnach:

<div class="row-fluid"> <!-- MAIN FLUID CONTAINER --> 
    <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT --> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       BLOG 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       RECIPE 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       LISTING 
      </div> 
     </div> 

    </div> <!-- END OF MAIN CONTENT --> 

    <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR --> 
     SIDE 
    </div> <!-- END SIDEBAR --> 

</div> <!-- END OF MAIN FLUID CONTAINER --> 

do „redBorder” tylko dodaje 1px czerwone obramowanie wokół wszystko, aby pomóc w wizualizacji.

Jednak, jak tylko dodaję następną sekcję, wpływa ona na zawartość pod nią. Oto nowy kod:

<div class="row-fluid"> <!-- MAIN FLUID CONTAINER --> 
    <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT --> 

     <div class="searchSection redBorder" style="height: 100px;"> 
      SEARCH SECTION 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       BLOG 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       RECIPE 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       LISTING 
      </div> 
     </div> 

    </div> <!-- END OF MAIN CONTENT --> 

    <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR --> 
     SIDE 
    </div> <!-- END SIDEBAR --> 

</div> <!-- END OF MAIN FLUID CONTAINER --> 

Oto jak to wygląda wtedy:

Ktoś wie dlaczego to robi? Dlaczego dodanie części na początku tych dziewięciu kolumn spowoduje, że te kolumny poniżej dodadzą dopełnienie w taki sposób, że nie będą już pasować do ich kontenera?

Answer 1

To ze względu na sposób siatka pracuje z wierszy i przęseł, szczególnie ta reguła w CSS Bootstrap za:

.row-fluid [class*="span"]:first-child { 
    margin-left: 0; 
} 

Stąd dlaczego dodawanie treści na początku oznacza, że ​​druga rozpiętość * elementy uzyskać margines przed im. Element searchSection ma pełną szerokość, dlatego pierwszy span4 jest zawijany do następnej linii i ma margines. Zakładając, że chcesz Przeszukaj całą szerokość, bezpieczna droga byłoby umieścić kolejny wiersz płynu wokół span4s:

<div class="searchSection redBorder" style="height: 100px;"> 
     SEARCH SECTION 
    </div> 

    <div class="row-fluid"> 
     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       BLOG 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       RECIPE 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       LISTING 
      </div> 
     </div> 
    </div> 

</div> <!-- END OF MAIN CONTENT --> 

Jest również sort-of wyjaśnione w gniazdowania sekcji kolumn w Dokumentach http://twitter.github.com/bootstrap/scaffolding.html#gridSystem .