twitter - color - tooltip bootstrap 4

No entiendo twitter bootstrap span y fila

Question

Era un gran usuario del sistema de grids 960, y pensé que probaría Twitter Bootstrap , pero tal vez es una pregunta estúpida y puedes reír y votar por mí, pero el hecho es que no entiendo el lapso.

Entonces, mi problema es que cuando creo un contenedor y creamos tramos dentro de él, no encaja uno al lado del otro correctamente:

Como en 960gs si escribo lo 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, sin importar lo que haga, 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 de 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>

Entonces, en el ejemplo anterior, termino con columnas desproporcionadas, 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:

• el contenedor es 940px
• fila es 960px con un margen de -20px
• span4 300px con un margen de 20px

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

La solución ''twitter bootstrap'':

Agregue bootstrap-responsive.css y cuando la pantalla vaya por debajo de 980px y más allá de 768px:

el contenedor se convierte en 724px, fila 744px y span4 228px, manteniendo un margen izquierdo en el primer span4.