Multiples et/ou imbriqués Bootstrap conteneurs?

Mon compréhension est que tous les fichiers d'amorce de style des éléments doit exister à l'intérieur d'un <div class="container"> élément. Mais parfois je vois Bootstrap exemples où il y a plusieurs "conteneurs":

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

Mes questions:

  1. Quand vous avez besoin d'une seule page HTML avec plusieurs "conteneur divs"? Quels sont les bénéfices de cette offre plutôt que de mettre l'ensemble du corps à l'intérieur de un grand "conteneur div"?
  2. Serait jamais vous voulez nid "conteneur divs" à l'intérieur d'autres? Quand/pourquoi?
  • Si vous utilisez une pleine largeur manège il a les contenants utilisés pour les sous-titres, donc il ne devrait pas être dans un conteneur. À cause de cela, vous pourriez avoir un récipient au-dessus d'elle et un récipient en dessous.
  • Alors que @Christina est correct en ce que les docs disent que vous n'avez pas de nid de conteneurs, il est parfois utilisé et utile. Voir stackoverflow.com/questions/29660034/... pour plus d'informations sur la nidification.
InformationsquelleAutor smeeb | 2014-10-20
  1. 71

    1. Certaines sections de la page occupent toute la largeur de la fenêtre d'affichage et d'autres pas. Certains milieux de la totalité de la largeur, mais le contenu ne sera pas.

      Un exemple de ceci est un court métrage qui a une image d'arrière-plan ou la couleur qui est la largeur de la fenêtre d'affichage, mais le contenu à l'intérieur, les formes ou que ce soit, de ne pas dépasser la .container à tout largeur de la fenêtre d'affichage.

    2. Vous n'avez pas de nid .container ou .container-fluid -- voir le docs. Il n'est pas nécessaire.

      Docs: Bootstrap nécessite un élément contenant pour envelopper le contenu du site
      et la maison de notre système de grille. Vous pouvez choisir l'un des deux récipients à utiliser
      dans vos projets. Notez que, en raison de rembourrage et de plus, ni
      conteneur empilable [ni signifie que .conteneur et .récipient de liquide ne doivent PAS être imbriquées à l'].

    • J'ai souvent un .container-fluid pour quelque chose comme la barre de navigation ou de la bannière, de la sorte, alors que le site principal se trouve à l'intérieur d'un .container.
    • Oui, et puis vous avez la double rembourrage. Docs: Bootstrap nécessite un élément contenant pour envelopper le contenu du site et de la maison de notre système de grille. Vous pouvez choisir l'un des deux récipients à utiliser dans vos projets. Notez que, en raison de rembourrage et de plus, ni le conteneur est empilable. getbootstrap.com/css
    • Je ne veux pas imbriquée de cours.
    • Je ne l'utilise pas .conteneur de fluide, à moins que l'enfant immédiat est un .de lignes et de colonnes.
    • Ni ne I. je voulais dire que j'aurais un récipient de liquide avec la barre de navigation de sorte qu'il saigne les bords de l'écran, puis après le container de balise de fermeture, début d'un nouveau non-réservoir de liquide avec le contenu principal.
    • Pour un exemple de la façon dont pourquoi vous n'avez pas besoin de nid de conteneurs - voir cet exemple - stackoverflow.com/a/25742158/5551783
    • Grande distinction à faire ici - peut-être qu'ils ne devraient pas être directement imbriquée, mais elles peuvent être imbriquées, et dans certains cas être imbriquées à l'. Disons que j'ai un panneau rembourré div à l'intérieur du conteneur principal qui n'est pas une ligne ou une colonne-dans ce cas, j'ai besoin d'un .container-fluid classe entourant mes lignes/colonnes à l'intérieur du panneau; sinon, je voudrais obtenir une barre de défilement horizontale (à moins de débordement à l'intérieur du panneau se trouve caché - mais je ne voudrait pas que, peut-être que je veux une barre de défilement s'il y a beaucoup de données à l'intérieur, peut-être d'une grande table).

    InformationsquelleAutor Christina
  2. 14

    Contrairement à ce que certains ont dit, vous pouvez imbriquer un container-fluid à l'intérieur d'un container. Il y a même un exemple sur le site officiel de bootstrap site web:

    http://getbootstrap.com/examples/navbar/

    InformationsquelleAutor BitByBit
  3. 4

    Fait son cela dépend totalement de l'exigence de la designer.

    À certains moments, vous avez besoin de toute la largeur de la ligne ( je veux dire viewport ou d'une bande de la partie visible que vous pouvez atteindre sans une classe de conteneur )

    http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

    voir ci-dessus exemple de modèle pour comprendre

    InformationsquelleAutor test
  4. 1

    Dans la Mise en page de la section 4.3 docs, https://getbootstrap.com/docs/4.3/layout/overview/#containers, il déclare maintenant

    Tandis que les conteneurs peut être imbriquées, la plupart des dispositions ne nécessitent pas un conteneur imbriqué.

    Juste être conscient de ce que les autres ont dit à propos de rembourrage, etc.

    InformationsquelleAutor Patrick McDonald