Conteneur-fluide vs .container
Vient de télécharger 3.1 et trouvé dans la documentation ...
Transformez toute disposition de grille de largeur fixe en une disposition de largeur totale en modifiant votre
.containerle plus à l'extérieur en.container-fluid.
En regardant dans bootstrap.css, il apparaît que .container-fluid est identique à .container. Les deux ont le même CSS, et chaque instance de .container-fluid est associée à .container et toutes les classes de colonnes sont spécifiées en pourcentages.
Lorsque je me suis servi d'exemples, je ne voyais aucune différence, car tout semblait fluide.
En tant que nouveau sur Bootstrap, je suppose que quelque chose me manque. Quelqu'un pourrait-il prendre une minute et m'éclairer?
Version rapide:.container a une largeur fixe pour chaque taille d'écran dans bootstrap (xs, sm, md, lg); .container-fluid s'agrandit pour remplir la largeur disponible.
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 de la page Web, la classe container donne à son div une largeur fixe spécifique. Ces lignes n'existent sous aucune forme pour container-fluid, donc sa largeur change à chaque modification de la largeur de la fenêtre.
Ainsi, par exemple, supposons que la fenêtre de votre navigateur mesure 1000 pixels de large. Comme il est supérieur à la largeur minimale de 992px, votre élément .container aura une largeur de 970px. Vous élargissez ensuite lentement la fenêtre de votre navigateur. La largeur de votre .container ne changera que si vous atteignez 1200px, puis passera à 1170px et restera ainsi pour les grandes largeurs de navigateur.
En revanche, votre élément .container-fluid sera constamment redimensionné lorsque vous apportez les modifications les plus infimes à la largeur de votre navigateur.
Je pense que vous dites qu'un container vs container-fluid est la différence entre réactif et non réactif à la grille. Ce n'est pas vrai ... ce qui est dit, c'est que la largeur n'est pas fixée ... toute sa largeur!
Ceci est difficile à expliquer alors regardons les exemples
Exemple un
container-fluid:
Vous voyez donc comment le conteneur occupe tout l'écran ... c'est un container-fluid.
Regardons maintenant l'autre container normal et regardons les bords de l'aperçu
Exemple deux
container
Voyez-vous l'espace blanc dans l'exemple? C'est parce que c'est une largeur fixe container! Il serait peut-être plus judicieux d’ouvrir les deux exemples dans deux onglets différents et d’échanger les informations.
EDIT
Mieux encore, voici un exemple avec les deux conteneurs à la fois! Maintenant, vous pouvez vraiment faire la différence!
J'espère que cela a aidé à clarifier un peu!
.container et .container-fluid répondent tous les deux (c'est-à-dire qu'ils modifient la présentation en fonction de la largeur de l'écran), mais de différentes manières (je sais que le nom ne donne pas l'impression que ça a l'air).
Réponse courte:
.container est redimensionnant de manière instable/agitée et
.container-fluid est un redimensionnement continu/fin en largeur: 100%.
Du point de vue de la fonctionnalité:
.container-fluid est redimensionné en permanence lorsque vous modifiez la largeur de votre fenêtre/navigateur, sans laisser d'espace vide supplémentaire sur les côtés, contrairement à ce que .container fait. (D'où l'appellation: "fluide" par opposition à "numérique", "discret", "chunké" ou "quantifié").
.container redimensionne en morceaux de plusieurs largeurs déterminées. En d’autres termes, il s’agira de largeurs d’écrans spécifiques, différentes de largeurs d’écrans.
Sémantique: "largeur fixe"
Vous pouvez voir comment la confusion des noms peut survenir. Techniquement, on peut dire que .container est à "largeur fixe", mais il est fixe uniquement dans le sens où il ne redimensionne pas à chaque largeur granulaire. En réalité, il n'est pas "fixe" dans le sens où il reste toujours à une largeur de pixel spécifique, car il peut en fait changer de taille.
D'un point de vue fondamental:
.container-fluid possède la propriété CSS width: 100%;, de sorte qu'elle réajuste continuellement à chaque granularité de la largeur de l'écran.
.container-fluid {
width: 100%;
}
.container a quelque chose comme "width = 800px" (ou em, rem etc.), une valeur de largeur de pixel spécifique pour différentes largeurs d'écran. C’est bien entendu ce qui fait que la largeur de l’élément saute brusquement à une largeur différente lorsque la largeur de l’écran dépasse un seuil de largeur d’écran. Et ce seuil est régi par les requêtes de média CSS3, qui vous permettent d’appliquer différents styles pour différentes conditions, telles que les plages de largeur d’écran.
@media screen and (max-width: 400px){
.container {
width: 123px;
}
}
@media screen and (min-width: 401px) and (max-width: 800px){
.container {
width: 456px;
}
}
@media screen and (min-width: 801px){
.container {
width: 789px;
}
}
au-delà
Vous pouvez rendre n'importe quel élément de largeur fixe sensible via des requêtes multimédia, et pas seulement les éléments .container, car les requêtes multimédia correspondent exactement à la manière dont .container est implémenté par bootstrap en arrière-plan (voir la réponse de JKillian le code).
Utilisez .container-fluid lorsque vous souhaitez que votre page change de forme à chaque petite différence dans la taille de la fenêtre.
Utilisez .container lorsque vous souhaitez que votre page change de forme en seulement 4 types de tailles , également appelés "points d'arrêt".
Les points d'arrêt correspondant à leurs tailles sont:
- Extra Small: (résolution mobile uniquement)
- Petit: 768px (comprimés)
- Medium: 992px (ordinateurs portables)
- Large: 1200px (ordinateurs portables/ordinateurs de bureau)
Mis à jour en 2019
La différence fondamentale est que container évolue en réponse, tandis que container-fluid est toujours width:100%. Par conséquent, dans les définitions CSS racine, elles semblent identiques, mais si vous regardez plus loin, vous verrez que .container est lié aux requêtes multimédia.
Bootstrap 4
Le container a 5 largeurs ...
.container {
width: 100%;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
Bootstrap 3
Le container a 4 tailles. Toute la largeur sur les écrans xs, puis sa largeur varie en fonction des requêtes de support suivantes.
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
.container a une valeur de pixel de largeur maximale, tandis que .container-fluid est de largeur maximale 100%.
.container-fluid redimensionne continuellement lorsque vous modifiez la largeur de votre fenêtre/navigateur de n’importe quel montant.
.container redimensionne en morceaux de différentes largeurs, contrôlés par des requêtes de support (techniquement, on peut dire que c'est "largeur fixe" car des valeurs en pixels sont spécifiées, mais si vous vous arrêtez là, les utilisateurs peuvent avoir l'impression que cela ne peut pas changer. taille - c.-à-d. non réactif)
Du point de vue de l’affichage, .container vous donne plus de contrôle sur ce que les utilisateurs voient et facilite la visualisation de ce que les utilisateurs verront, car vous ne disposez que de 4 variantes d’affichage (5 dans le cas de bootstrap 5) parce que les tailles sont les mêmes que les tailles de grille. par exemple. .col-xs, .col-sm, .col et .col-lg.
Cela signifie que lorsque vous effectuez des tests utilisateur, si vous testez sur un écran avec les 4 tailles différentes, toutes les vérifications sont affichées.
Lorsque vous utilisez .container-fluid parce que le curseur est lié à la largeur de la fenêtre, l'affichage est dynamique. Les variations sont donc beaucoup plus grandes et les utilisateurs avec de très grands écrans ou des largeurs d'écran inhabituelles peuvent voir des résultats inattendus.
Vous avez raison en 3.1 .container-fluid et .container sont identiques et fonctionnent comme des conteneurs, mais si vous les supprimez, cela fonctionne comme .container-fluid (pleine largeur). Ils avaient supprimé .container-fluid pour "Mobile First Approach", mais maintenant c'est de retour dans la version 3.3.4 (et ils fonctionneront différemment)
Pour obtenir le dernier bootstrap, veuillez lire ce message sur stackoverflow, cela vous aidera à vérifier.