Red Twitter Bootstrap no funciona como se esperaba

Question

Estoy usando un tema premium de Wordpress basado en Twitter Bootstrap. El tema se llama StrapPress. Me estoy yendo con la cuadrícula y tratando de configurar las cosas de una manera muy básica, pero la grilla está actuando de maneras extrañas. Lo que quiero es una sección de contenido principal compuesta de nueve columnas y una barra lateral de tres. Dentro de las nueve columnas, quiero poder tener columnas anidadas con diferentes áreas de contenido: en una página, la primera sección será las nueve columnas completas, y luego el contenido debajo de ella se dividirá en tres secciones iguales.

El siguiente código establece que hasta bien sin la primera sección de las columnas 9:

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

El 'redBorder' sólo se suma un borde rojo alrededor de 1 píxel todo para ayudar a visualizar.

Sin embargo, tan pronto como agregue la siguiente sección, afecta el contenido debajo de ella. Aquí está el nuevo código:

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

Aquí está cómo se ve a continuación:

Alguien sabe por qué está haciendo esto? ¿Por qué agregar contenido al comienzo de esas nueve columnas hace que las siguientes columnas agreguen relleno a sí mismas de tal manera que ya no quepan en su contenedor?

Answer 1

Esto es debido a la forma en la red funciona con filas y vanos, específicamente esta norma de CSS de Bootstrap:

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

tanto ¿por qué añadir el contenido en la base significa que el otro lapso * elementos de llegar margen antes ellos. La sección search es de ancho completo, por lo tanto, la primera span4 se ajusta a la siguiente línea y tiene margen. Suponiendo que se desea que el ancho total sección de búsqueda, el camino seguro para ir sería poner otra fila-líquido alrededor de los 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 --> 

Ésta es también una especie de se explica en la sección de columnas de anidación en la documentación, http://twitter.github.com/bootstrap/scaffolding.html#gridSystem .