Conteneur-fluide vs .conteneur

Vient de télécharger 3.1 et trouvé dans la documentation ...

Mettez toute disposition de la grille de largeur fixe dans une disposition pleine largeur en changeant votre plus à l' extérieur .containerà .container-fluid.

En regardant bootstrap.cssdedans, il semble que ce .container-fluidsoit identique à .container. Les deux ont le même CSS, et chaque instance de .container-fluidest associée à .container, et toutes les classes de colonnes sont spécifiées en pourcentages.

En manipulant des exemples, je ne voyais aucune différence, car tout semblait fluide.

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

Version rapide: .container a une largeur fixe pour chaque taille d'écran en bootstrap (xs, sm, md, lg); .container-fluidse dilate pour remplir la largeur disponible.

La différence entre containeret container-fluidvient 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 sur laquelle la page Web est consultée, la containerclasse donne à son div une largeur fixe spécifique. Ces lignes n'existent sous aucune forme pour container-fluid, donc sa largeur change chaque fois que la largeur de la fenêtre change.

Par exemple, disons que la fenêtre de votre navigateur a une largeur de 1000 pixels. Comme il est supérieur à la largeur minimale de 992 pixels, votre .containerélément aura une largeur de 970 pixels. Vous élargissez ensuite lentement la fenêtre de votre navigateur. La largeur de votre .containerne changera pas jusqu'à ce que vous atteigniez 1200px, à laquelle elle passera à 1170px de large et restera ainsi pour toutes les largeurs de navigateur plus grandes.

Votre .container-fluidélément, en revanche, sera constamment redimensionné à mesure que vous apportez les plus petites modifications à la largeur de votre navigateur.

Je pense que vous dites qu'un containervs container-fluidest la différence entre réactif et non réactif à la grille. Ce n'est pas vrai ... ce qui veut dire que la largeur n'est pas fixe ... sa pleine largeur!

C'est difficile à expliquer alors regardons les exemples

Exemple un

container-fluid:

http://www.bootply.com/119981

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

Permet maintenant de regarder l'autre simplement comme une normale containeret de regarder les bords de l'aperçu

Exemple deux

container

http://www.bootply.com/119982

Voyez-vous maintenant l'espace blanc dans l'exemple? C'est parce que c'est une largeur fixe container! Il pourrait être plus judicieux d'ouvrir les deux exemples dans deux onglets différents et de basculer d'avant en arrière.

ÉDITER

Mieux encore, voici un exemple avec les 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!

Les deux .containeret .container-fluidsont 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-fluidredimensionne 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 .containerpasse. (D'où la dénomination: «fluide» par opposition à «numérique», «discret», «fragmenté» ou «quantifié»).

.containerredimensionne 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 .containerc'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-fluida la propriété CSS width: 100%;, donc il se réajuste continuellement à chaque granularité de largeur d'écran.

.container-fluid {
  width: 100%;
}

.containera 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 .containersont implémentées par bootstrap en arrière-plan (voir la réponse de JKillian pour le code).

À utiliser .container-fluidlorsque vous souhaitez que votre page change de forme avec chaque petite différence de taille de fenêtre.

À utiliser .containerlorsque vous souhaitez que votre page se transforme en seulement 4 types de tailles , également appelées "points d'arrêt".

Les points d'arrêt correspondant à leurs tailles sont:

• Extra Small: (uniquement la résolution mobile)
• Petit: 768 px (comprimés)
• Moyen: 992 pixels (ordinateurs portables)
• Grand: 1200 px (ordinateurs portables / de bureau)

Mise à jour 2019

La différence de base est que l' containeréchelle est réactive, alors qu'elle l' container-fluidest toujours width:100%. Par conséquent, dans les définitions CSS racine, elles apparaissent les mêmes, mais si vous regardez plus loin, vous verrez que cela .containerest lié aux requêtes multimédias.

Bootstrap 4

Le containera 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 containera 4 tailles. Pleine largeur sur les xsécrans, puis sa largeur varie en fonction des requêtes multimédias suivantes.

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

démo conteneur vs conteneur-fluide

.containera une valeur de pixel de largeur maximale, tandis que sa .container-fluidlargeur maximale est de 100%.

.container-fluid redimensionne en continu lorsque vous modifiez la largeur de votre fenêtre / navigateur de n'importe quelle quantité.

.container redimensionne en morceaux à plusieurs largeurs déterminées, contrôlées par des requêtes multimédias (techniquement, nous pouvons dire que c'est une «largeur fixe» car les valeurs des pixels 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 qu'il ne répond pas .)

Du point de vue de l'affichage, .containervous avez plus de contrôle sur ce que voient les utilisateurs et vous permet de voir plus facilement ce que les utilisateurs verront, car vous n'avez que 4 variantes d'affichage (5 dans le cas du bootstrap 5) car les tailles se rapportent à la mêmes que les tailles de grille. par exemple .col-xs, .col-sm, .colet .col-lg.

Cela signifie que lorsque vous effectuez des tests utilisateur si vous testez sur un écran avec les 4 tailles différentes, vous voyez toutes les vérifications à l'écran.

Lors de l'utilisation .container-fluidparce que le witdh est lié à la largeur de la fenêtre d'affichage, l'affichage est dynamique, donc les variations sont beaucoup plus importantes et les utilisateurs avec de très grands écrans ou des largeurs d'écran peu communes peuvent voir des résultats que vous n'attendiez pas.

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 en 3.3.4 (et ils fonctionneront différemment)

Pour obtenir le dernier bootstrap, veuillez lire cet article sur stackoverflow, cela vous aidera à le vérifier .