web-dev-qa-db-fra.com

Je ne comprends pas Twitter bootstrap span and row

J'étais un énorme utilisateur du système de grille 960, et je pensais que j'essaierais Twitter Bootstrap , mais c'est peut-être une question stupide et vous pouvez rire et voter contre moi, mais le fait est que je ne comprends pas la portée et la ligne.

Mon problème est donc que lorsque je crée un conteneur et que je crée des portées à l'intérieur, il ne s'adapte pas correctement les uns à côté des autres:

Comme dans 960gs si j'écris ce qui suit

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

J'obtiens une colonne parfaite de 3 côte à côte.

Mais je ne peux pas y arriver avec Twitter Bootstrap, quoi que je fasse, je me retrouve toujours avec des colonnes disproportionnées, donc les colonnes ne remplissent pas le conteneur comme il le supposait, comme avec 960gs. Si je place 3 colonnes, la marge à droite n'est pas correcte, ou elle ne rentrera pas correctement dans le conteneur.

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

enter image description here

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

Qu'est-ce qui est différent à propos de Twitter Bootstrap par rapport aux 960gs qui causent mon problème?

twittertwitter-bootstrap960.gs
34
Side

La raison:

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

lorsque la largeur de l'écran est <= 940px, le -20px de la ligne et la marge de 20px de span4 s'annulent, c'est pourquoi le premier span4 n'a pas de marge gauche.

La solution 'Twitter bootstrap':

Ajoutez bootstrap-responsive.css et lorsque l'écran passe sous 980px et au-delà de 768px:

le conteneur devient 724px, la ligne 744px et le span4 228px, en gardant une marge gauche sur le premier span4.

46
baptme