Doit Bootstrap) Les éléments de conteneur incluent des éléments de ligne?
D'après ma lecture de la documentation, il semble que .container est le wrapper "parent" pour le .row et les div qui contiennent le .spanX (où le x totalise 12). Cependant, il ne semble pas qu'il y ait un .row dans leur exemple de navigation.
De plus, sur leur site de documentation, les .container est enveloppé par un couple de divs liés à la barre de navigation.
Quelqu'un peut-il expliquer un peu comment le cadre devrait fonctionner? Je suis nouveau à cela.
Le .row La classe n'est pas obligatoire dans un .container, mais c’est une bonne idée de l’inclure de toute façon lorsque vous démarrez au cas où vous voudriez plusieurs lignes plus tard.
Tout ça .row _ fait vraiment en sorte que tous les divs à l’intérieur apparaissent sur leur propre ligne, séparés du précédent et du suivant .rows.
Pour le .container à l'intérieur du .navbar divs, c’est un élément distinct qui est requis pour que la barre de navigation s’aligne avec le reste de la page. Si vous regardez plus bas dans le code HTML affiché, vous verrez qu'il y a un autre .container qui n’est à l’intérieur d'aucun .navbar _ divs, et c’est celui qui contient tout le contenu principal.
Un exemple complet
<div class="container">
<div class="row">
<!-- These divs are inline and do NOT fill up the full 12 columns -->
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<!-- This is a automatically a new line of divs -->
<div class="row">
<!-- This div will appear below the previous row, even though it
would fit next to the other divs -->
<div class="span4"></div>
</div>
<!-- These will appear in their own row, but may act
unexpectedly in certain situations -->
<div class="span4"></div>
<div class="span4"></div>
</div>
En bref
.row définit une rangée de div, comme son nom l’indique. Chacun indique une nouvelle ligne de divs, peu importe si la ligne ci-dessus est pleine ou non.
La réponse est beaucoup plus simple que celles données. Non, .container ne doit pas contenir de code spécifique, et il n’a aucune charge sur ce qui le contient ...
Quoi .container do est utilisé comme "wrapper" pour "contenir" la taille de tout élément encapsulé à l'intérieur. Et .container peut envelopper des pages ou des composants. Donc, si vous voulez une page similaire à la documentation de ces Twitter Bootstrap, avec une largeur "fixe" et une marge égale des deux côtés, alors un seul .container est nécessaire pour envelopper tout le contenu de la page.
Il y a d'autres utilisations pour .container ainsi que; avez-vous remarqué comment la barre de navigation supérieure dans la documentation de Bootstrap (.navbar-fixed-top) s'étend sur toute la largeur de l'écran, mais les éléments de navigation à l'intérieur de la barre de navigation sont "contenus" dans la largeur du contenu? C'est parce que le .navbar-fixed-top n'est pas à l'intérieur d'un .container mais le .nav dedans c'est.
La grille bootstrap) est composée de 12 colonnes qui peuvent être ajustées dans n'importe quelle combinaison au sein d'une ligne, à condition qu'elles totalisent jusqu'à 12. Vous pouvez les considérer comme des lignes de confinement telles que les types de table. lignes, qui sont destinées à séparer différentes lignes de contenu. Dans la grille, le .row Le conteneur a une tâche distincte et permet de réajuster les dernières colonnes de la grille. Largeur de la gouttière, qui varie en fonction de la taille de l'écran (si la feuille sensible est incluse). Si vous regardez le css derrière le .row vous remarquerez qu’il a une propriété de margin-left:-30px _ par défaut (une fois encore, il peut être supérieur ou inférieur en fonction de la taille de l'écran), propriété destinée à "supprimer" la gouttière de la dernière colonne de la ligne; sans elle, la grille ne réajusterait pas la gouttière et elle se briserait sur une deuxième ligne.
Maintenant, la raison pour laquelle le .row le conteneur est un enfant du .container conteneur est parce que le .row conteneur est uniquement destiné à séparer les "lignes" de contenu, pas à contenir des sections et plus au-dessus du contenu du centre dans une page. La raison pour laquelle l'exemple de navigation n'en avait pas était probablement due au fait que la largeur de gouttière manquait dans les éléments de navigation, car il s'agissait d'un élément de bloc complet et non d'une grille. Il n'était donc pas nécessaire de réinitialiser cette dernière gouttière lâche.