Les éléments de conteneur Bootstrap doivent-ils inclure des éléments de ligne?

D’après ma lecture de la documentation, il semble que .container soit le wrapper “parent” pour le .row et les div qui contiennent le .spanX (où le total est de 12). Cependant, il ne semble pas y avoir de .row dans leur exemple de navigation.

En outre, sur leur site de documentation, le .container est entouré de deux divs liés à la barre de navigation.

Quelqu’un peut-il préciser un peu comment le cadre devrait fonctionner? Je suis nouveau à ça.

La classe .row n’est pas requirejse dans un .container , mais c’est une bonne idée de l’inclure quand vous lancez plusieurs lignes plus tard.

Tout ce que .row vraiment, c’est de s’assurer que toutes les divs à l’intérieur apparaissent sur leur propre ligne, séparées des .rows précédents et suivants.

Pour le .container intérieur des div .navbar , c’est une chose distincte qui est nécessaire pour que la barre de navigation s’aligne avec le rest de la page. Si vous regardez plus loin dans le rendu HTML, vous verrez qu’il y a un autre .container qui ne se trouve dans aucune div .navbar , et c’est celui qui contient tout le contenu principal.

Un exemple complet

 
...
...

En bref

.row définit une ligne de divs, comme son nom l’indique. Chacun indique une nouvelle ligne de div, peu importe si la ligne ci-dessus est pleine ou non.

La réponse est beaucoup plus simple que celles données. Non, .container n’a pas besoin de contenir de code spécifique, et il n’a aucune charge sur ce qui le contient …

Ce .container fait .container sert de “wrapper” pour “contenir” la taille de tous les éléments enveloppés à l’intérieur. Et .container peut envelopper des pages ou des composants. Donc, si vous voulez une page similaire à celle des docs 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 aussi d’autres utilisations pour .container ; Avez-vous remarqué que la barre de navigation supérieure de la documentation de Bootstrap ( .navbar-fixed-top ) couvre toute la largeur de l’écran, mais que les éléments de navigation de la barre de navigation sont “confinés” à la largeur du contenu? Cela est dû au fait que le .navbar-fixed-top n’est pas dans un .container mais que

La grid d’amorçage est composée de 12 colonnes pouvant être ajustées dans n’importe quelle combinaison dans une ligne, à condition qu’elles soient au nombre de 12. Vous pouvez les considérer comme des lignes de confinement telles que les lignes de tableau, destinées à séparer différentes lignes. de contenu. Dans la grid, le conteneur .row a une tâche distincte et est là (et requirejse) pour réajuster la largeur de la gouttière des dernières colonnes de la grid, qui varie en fonction de la taille de l’écran (si la feuille sensible est incluse). Si vous regardez le css derrière la classe .row , vous remarquerez qu’il a une propriété de margin-left:-30px par défaut (encore une fois, il peut être supérieur ou inférieur à la taille de l’écran), une propriété qui est destinée à ” retirer “la gouttière de la dernière colonne de la rangée; sans elle, la grid ne réajusterait pas la gouttière et se briserait sur une deuxième ligne.

Maintenant, la raison pour laquelle le conteneur .row est un enfant du conteneur .container est que le conteneur .row est uniquement destiné à séparer les “lignes” de contenu, pour ne pas contenir de sections et plus sur le contenu central d’une page. En tant que tel, la raison pour laquelle l’exemple de navigation n’en avait pas était probablement dû au fait que les éléments de navigation manquaient de largeur de gouttière, car il était censé être un élément de bloc complet et non une grid. réinitialiser cette dernière gouttière.