No entiendo twitter bootstrap span y fila

Question

Era un usuario de sistema de grilla 960 enorme, y pensé que probaría Twitter Bootstrap, pero tal vez es una pregunta estúpida y puede reírse y votar por mí pero el hecho es No entiendo el lapso y la fila.

Así que mi problema es que cuando se crea un contenedor, y creo las luces en el interior de la misma, no se ajusta al lado del otro correctamente:

Al igual que en 960gs si escribo el siguiente

<div class="container_12"> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
</div> 

Obtengo una 3 columna perfecta una al lado de la otra.

Pero no puedo lograr esto con Twitter Bootstrap, no importa lo que hago, siempre termino con columnas desproporcionadas, por lo que las columnas no llenan el contenedor como se supone, como con 960gs. Si coloco 3 columnas, entonces el margen a la derecha no es correcto o no encajará correctamente en el contenedor.

ejemplo boostrap:

<div class="container"> 
    <div class="row"> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
    </div> 
</div> 

Así en el ejemplo anterior, termino con columnas desproporcionados, no hay margen en la primera columna a la izquierda. Si hago esto en 960gs con las clases de cuadrícula, es perfecto.

¿Qué tiene de diferente Twitter Bootstrap en comparación con 960gs que está causando mi problema?

Answer 1

La razón:

• contenedor es 940px
• fila es de 960 con un margen -20px
• span4 300px con un margen de 20 píxeles

cuando el ancho de la pantalla es < = 940px, los -20px de la fila y el margen de 20px de span4 se cancelan mutuamente, es por eso que el primer span4 no tiene margen izquierdo.

La solución 'gorjeo bootstrap':

Añadir bootstrap-responsive.css y cuando la pantalla pasa por debajo de 980 px y más allá 768px:

recipiente convertirse 724px, fila 744px y span4 228px, manteniendo una margen izquierdo en primer span4.