Container-fluide vs .container

Question

Il suffit de télécharger 3.1 et trouvé dans les docs...

Transformez n'importe quelle largeur fixe de la grille de mise en page en pleine largeur de la mise en page de modification de votre ultrapériphériques .container de .container-fluid.

La recherche dans le bootstrap.css, il semble que .conteneur de fluide est identique .le conteneur. Les deux ont le même CSS, et chaque instance de .conteneur de fluide est jumelé avec .conteneur, et toutes colonne classes sont spécifiés dans les pourcentages.

Lorsque vous tourner avec des exemples, je ne pouvais pas voir la différence, comme tout semble fluide.

Comme je suis nouveau sur Bootstrap, je suppose que je suis en manque de quelque chose. Quelqu'un pourrait-il prendre une minute et m'éclairer?

Answer 1

La différence entre container et container-fluid provient de ces lignes de CSS:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

En fonction de la largeur de la fenêtre d'affichage que la page web est affichée, l' container classe donne son div spécifique de largeur fixe. Ces lignes n'existent pas dans toute forme de container-fluid, de sorte que sa largeur change à chaque fois que la largeur de la fenêtre d'affichage change.

Ainsi, par exemple, dire que la fenêtre de votre navigateur est 1000px de large. Comme il est plus grand que le min-width de 992px, votre .container élément aura une largeur de 970px. Vous puis, lentement, d'élargir la fenêtre de votre navigateur. La largeur de votre .container ne changera pas jusqu'à ce que vous obtenez à 1200px, à qui il va passer à 1170px de large et de rester de cette façon pour un plus grand navigateur de largeurs.

Votre .container-fluid élément, d'autre part, seront constamment redimensionner comme vous le faites, même les plus petits changements à votre largeur du navigateur.

---

Version rapide: .container a une largeur fixe pour chaque taille d'écran dans le bootstrap (xs,sm,md,lg); .container-fluid s'agrandit pour remplir la largeur disponible.

Answer 2

Je pense que vous êtes en disant que l' container vs container-fluid est la différence entre le sensible et non sensible à la grille. Ce n'est pas vrai...qu'est-ce que c'est que la largeur n'est pas fixe...sa largeur!

C'est dur à expliquer, donc permet de regarder les exemples

---

Un exemple

container-fluid:

http://www.bootply.com/119981

Donc, vous voyez comment le conteneur prend tout l'écran...c'est un container-fluid.

Regardons maintenant l'autre juste un normal container et de regarder les bords de la fenêtre d'aperçu

L'exemple de deux

container

http://www.bootply.com/119982

Maintenant voyez-vous l'espace blanc dans l'exemple? C'est parce que son une largeur fixe container ! Il pourrait faire plus de sens pour ouvrir les deux exemples dans deux onglets différents et de basculer d'avant en arrière.

MODIFIER

Mieux encore, voici un exemple avec deux conteneurs à la fois! Maintenant, vous pouvez vraiment faire la différence!

http://www.bootply.com/119983

J'espère que cela a aidé à clarifier un peu!

Answer 3

.container a une largeur max de valeur de pixel, alors que .container-fluid max-width de 100%.

.container redimensionne en morceaux à plusieurs certaines largeurs, contrôlée par les demandes des médias (techniquement, on peut dire que c'est "largeur fixe" parce que les pixels les valeurs sont spécifiées, mais si vous vous arrêtez là, les gens peuvent avoir l'impression qu'il ne peut pas changer de taille - c'est à dire pas de réponse.)

.container-fluid permanence redimensionne que vous modifiez la largeur de la fenêtre de votre navigateur/par n'importe quel montant, en ne laissant pas d'espace vide sur les côtés. (D'où l'appellation: "fluide").

Ils sont à la fois sensible, mais de façons différentes. (C'est une idée fausse commune que seul un récipient de fluide est sensible).

Vous pouvez faire l'une des largeurs fixes éléments sensibles via les media queries. C'est exactement ce qu' .container fait grâce à bootstrap de l'arrière-plan de la magie (voir JKillian de réponse pour le code)