Les deux .container
et .container-fluid
sont sensibles (ils changent la mise en page en fonction de la largeur de l' écran), mais de différentes façons (je sais, la nomination ne fait pas sonner de cette façon).
Réponse courte:
.container
est redimensionnement sautillant / saccadé, et
.container-fluid
est un redimensionnement continu / fin en largeur: 100%.
Du point de vue des fonctionnalités:
.container-fluid
redimensionne en continu lorsque vous modifiez la largeur de votre fenêtre / navigateur de n'importe quelle quantité, ne laissant aucun espace vide supplémentaire sur les côtés, contrairement à ce qui se .container
passe. (D'où la dénomination: «fluide» par opposition à «numérique», «discret», «fragmenté» ou «quantifié»).
.container
redimensionne en morceaux à plusieurs certaines largeurs. En d'autres termes, il y aura différentes largeurs spécifiques aka "fixes" différentes plages de largeurs d'écran.
Sémantique: "largeur fixe"
Vous pouvez voir comment une confusion de noms peut survenir. Techniquement, nous pouvons dire que .container
c'est une "largeur fixe", mais elle n'est fixée que dans le sens où elle ne se redimensionne pas à chaque largeur granulaire. Il n'est en fait 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
a la propriété CSS width: 100%;
, donc il se réajuste continuellement à chaque granularité de largeur d'écran.
.container-fluid {
width: 100%;
}
.container
a quelque chose comme "width = 800px" (ou em, rem etc.), une valeur de largeur de pixel spécifique à différentes largeurs d'écran. C'est bien sûr ce qui fait que la largeur de l'élément saute brusquement à une largeur différente lorsque la largeur de l'écran franchit un seuil de largeur d'écran. Et ce seuil est régi par les requêtes multimédias 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 réactif via des requêtes multimédias, pas seulement des .container
éléments, car les requêtes multimédias sont exactement comment elles .container
sont implémentées par bootstrap en arrière-plan (voir la réponse de JKillian pour le code).