Conteneur-fluide vs .conteneur


509

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?


4
J'ai vu celui-là. Il a été affiché il y a quelques tours. le liquide de conteneur a été retiré pour 3,0 et ajouté de nouveau pour 3,1.
FatFingers

1
@Ranveer Certainement pas un doublon car cela fait référence à> BS3 qui est BS2.3 - Puisque cette question ne répond pas, pourriez-vous la supprimer pour ne pas dérouter les futurs utilisateurs
PW Kad

À partir de la documentation, le fluide couvre la largeur de la fenêtre entière. (ou est-ce celui de l'ensemble du conteneur ou de l'élément contenant?) Dans tous les cas, pourquoi le nom est-il fluide? Qu'est-ce qu'un liquide par opposition au récipient non fluide?
pashute

Réponses:


704

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.


@jkillian Cela signifie que si je veux créer une mise en page pleine largeur, je devrais utiliser .container-fluidet .containerpour la largeur en boîte, est-ce vrai?
Hung PD

1
@TheHung Dépend exactement de ce que vous entendez par «pleine largeur», mais container-fluidc'est ce que j'irais dans votre cas pour autant que je
sache

@JKillian Comme de nombreux thèmes de nos jours, ils ont toujours 2 dispositions: disposition en boîte et large. J'espère que vous pouvez comprendre ce que j'explique. Désolé pour mon mauvais anglais.
Hung PD

@JKillian Que diriez-vous d'utiliser .container et .container-fluid dans certains cas? Ex.: ( Design.davidrozando.com/drew-html-v1.1/… ).
Brightweb

5
@JKillian Alors, pourquoi le liquide de conteneur est-il même nécessaire?

177

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!


l'exemple avec les deux types de conteneurs a des éléments qui changent tous deux de largeur.
ahnbizcad

6
Même en sachant quelle est la différence, j'ai trouvé l'exemple des "deux" déroutant à cause de l'ombrage. J'ai fourré votre code pour en faire un exemple plus clair pour certains: bootply.com/119983 (En outre, .row-fluid n'est pas nécessaire dans Bootstrap 3. Utilisez simplement .row si votre conteneur est fluide ou non.)
Carl Bussema

Carl, votre lien va dans le même exemple que l'original. Si vous avez toujours votre version forkée, pouvez-vous publier le lien?
Mike T

6
Voici un bon exemple de lien fork , au cas où quelqu'un d'autre le rencontrerait à l'avenir.
Mike Collins

Merci Mike pour l'autre exemple, ils avaient exactement la même apparence sur mon navigateur.
Eric

169

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).


1
le comportement le plus précis .containern'est-il pas adaptatif plutôt que réactif?
ayjay

@ayjay vous soulevez un bon point. Il serait utile d'avoir des termes pour distinguer le redimensionnement continu vs redimensionnement sautillant.
ahnbizcad

1
@ayjay Adaptive détecte le type d'appareil du client et rend les choses côté serveur. Responsive ne se soucie pas du type d'appareil du client; il ne se soucie que de la largeur (en raison des requêtes des médias). En tant que tel, réactif est rendu côté client (css, javascript). voir huffingtonpost.com/garrett-goodman/… et amberweinberg.com/is-it-adaptive-or-responsive-web-design IMO responsive est beaucoup plus facile à maintenir et à construire que d'avoir des versions complètement différentes de votre site pour différents appareils. Mais votre CSS doit tenir compte de tous les navigateurs.
ahnbizcad

@ajay Revisiter cette question sémantique d'adaptatif vs réactif ... car adaptatif signifie qu'il détecte le périphérique et crache différents html / css / js en conséquence ... il est concevable que le html / css / js puisse contenir un style css de largeur: 100% ;. et cela peut être pour tous les appareils. Dans un tel cas, tout est adaptatif, mais redimensionne toujours en continu plutôt que brusquement en morceaux ... Ainsi, il n'est pas sémantiquement correct de l'appeler adaptatif vs réactif
ahnbizcad

24

À 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)

11

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


Cela n'a rien à voir avec la question. Belle information mais pas pertinente ici.
BeNice

Zim, il demandait quelle était la DIFFÉRENCE entre .container-fluidet .container. C'était l'information que je cherchais. Vos informations sont intéressantes mais, quand je suis venu à la recherche de la réponse, j'ai vraiment confondu mon diable pendant quelques minutes. Si elle était répertoriée APRÈS les réponses qui ont répondu à la question, ce serait bien mais SO ne semble pas nous laisser suggérer notre propre commande. Et en lisant mon commentaire d'origine, je n'étais pas aussi clair que j'aurais pu l'être. Anyhoo merci pour l'info.
BeNice

En bref, .containerchange la largeur en fonction des requêtes des médias et .container-fluidchange la largeur en temps réel (selon la largeur du port de vue)
Hassan Tareq

6

.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 .)


On dirait que le contenant-fluide global est meilleur? Plus réactif aux téléphones mobiles, ce qui est énorme aujourd'hui

5

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.


0

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 .

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.