Je ne comprends pas twitter bootstrap durée et de la ligne

Question

J'ai été un énorme 960 système de grille de l'utilisateur, et j'ai pensé que je voudrais essayer de Twitter Bootstrap, mais c'est peut-être une question stupide, et vous pouvez rire et en bas de voter de moi, mais le fait est que je ne comprends pas la portée et de la ligne.

Donc, mon problème est que quand je créer un conteneur, et de créer s'étend à l'intérieur de lui, il ne rentre pas à côté de l'autre correctement:

Comme dans 960gs si j'écris la suite

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

Je reçois un parfait 3 colonne à côté les uns des autres.

Mais je ne peut pas réaliser cela avec Twitter Bootstrap, peu importe ce que je fais, je finis toujours avec disproportionnée colonnes, de sorte que les colonnes ne pas remplir le récipient comme il se devait, comme avec 960gs. Si je place 3 colonnes, puis la marge à droite n'est pas correct, ou il ne rentre pas correctement dans le conteneur.

Bootstrap exemple:

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

Ainsi dans l'exemple ci-dessus, je me retrouve avec disproportionnée colonnes, il n'y a pas de marge dans la première colonne à gauche. Si je fais cela dans 960gs avec la grille des classes, c'est parfait.

Ce qui est différent au sujet de Twitter Bootstrap, comparativement à 960gs qui est à l'origine de mon problème?

Answer 1

La raison:

• le conteneur est 940px
• ligne est 960px avec une marge de 20px
• span4 300px avec une marge de 20px

lorsque la largeur de l'écran est <=940px, l'-20px à partir de la ligne et de la marge de 20px de span4 annuler les uns les autres, c'est pourquoi la première span4 n'a pas de marge de gauche.

Le 'twitter bootstrap" solution:

Ajouter bootstrap-responsive.css et lorsque l'écran se met en vertu de 980px et au-delà de 768px:

conteneur de devenir 724px, ligne 744px et span4 228px, en gardant une marge de gauche sur la première span4.