Question Container-fluide vs .container


Juste téléchargé 3.1 et trouvé dans les docs ...

Transformez n'importe quelle disposition de grille de largeur fixe en une disposition pleine largeur en changeant votre .container à .container-fluid.

Regarder dans bootstrap.css, il semble que .container-fluid est identique à .container. Les deux ont le même CSS, et chaque instance de .container-fluid est jumelé avec .container, et toutes les classes de colonnes sont spécifiées en pourcentages.

Lorsque je me tortillais avec des exemples, je ne voyais aucune différence, car tout semblait fluide.

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


443
2018-03-07 22:56


origine


Réponses:


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


La différence entre container et container-fluid vient 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;
  }
}

Selon la largeur de la fenêtre d'affichage de la page Web, le container class donne à sa div une largeur fixe spécifique. Ces lignes n'existent sous aucune forme pour container-fluid, sa largeur change à chaque fois que la largeur de la fenêtre d'affichage change.

Par exemple, disons que la fenêtre de votre navigateur est large de 1000 pixels. Comme il est plus grand que la min-width de 992px, votre .container l'élément aura une largeur de 970px. Vous élargissez ensuite lentement la fenêtre de votre navigateur. La largeur de votre .container ne changera pas jusqu'à ce que vous arriviez à 1200px, auquel il passera à 1170px de large et restera ainsi pour les largeurs de navigateur plus grandes.

Votre .container-fluid element, par contre, se redimensionnera constamment au fur et à mesure que vous apporterez les plus petites modifications à la largeur de votre navigateur.


630
2018-03-08 01:51



Je pense que vous dites qu'un container contre 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 fixe ... sa largeur totale!

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.

Regardons maintenant l'autre juste un normal container et regarder les bords de l'aperçu

Exemple deux

container

http://www.bootply.com/119982

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

MODIFIER

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!


161
2018-03-08 01:32



Tous les deux .container et .container-fluid sont réactifs (c'est-à-dire qu'ils modifient la mise en page en fonction de la largeur de l'écran), mais de différentes manières (je sais, la dénomination ne la fait pas sonner de cette façon).

Réponse courte:

.container est le redimensionnement jumpy / hachy, et

.container-fluid est continu / redimensionnement fin en largeur: 100%.

Du point de vue de la fonctionnalité:

.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 à .containerEst-ce que. (D'où le nom: "fluide" par opposition à "numérique", "discret", "chunked", ou "quantifié").

.container redimensionne en morceaux à plusieurs largeurs déterminées. En d'autres termes, il s'agira de différentes largeurs spécifiques dites "fixes" de différentes largeurs d'écran.

Sémantique: "largeur fixe"

Vous pouvez voir comment une confusion peut apparaître. Techniquement, on peut dire .container est la "largeur fixe", mais elle n'est fixée que dans le sens où elle ne redimensionne pas à chaque largeur granulaire. Il n'est en fait pas "corrigé" dans le sens où il reste toujours à une largeur de pixel spécifique, car il peut réellement changer de taille.

D'un point de vue fondamental:

.container-fluid a la propriété CSS width: 100%;, donc il 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 à 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 dépasse un seuil de largeur d'écran. Et ce seuil est régi par les requêtes de mé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 sensible via des requêtes média, pas seulement .container éléments, puisque les requêtes médias sont exactement comment .container est implémenté par bootstrap en arrière-plan (voir la réponse de JKillian pour le code).


146
2017-09-03 07:41



Utilisation .container-fluid quand vous voulez que votre page shapeshift avec chaque petite différence dans sa taille de fenêtre.

Utilisation .container quand vous voulez que votre page métamorphose à seulement 4 types de tailles, qui sont également connus sous le nom de "points d'arrêt".

Les points de rupture correspondant à leurs tailles sont:

  • Extra Small: (Seulement la résolution mobile)
  • Petit: 768px (comprimés)
  • Moyen: 992px (Ordinateurs portables)
  • Large: 1200px (Ordinateurs portables / Desktops)

13
2018-06-20 01:40



Mis à jour en 2018

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. Pleine largeur sur xs écrans, puis sa largeur varie en fonction des requêtes médias suivantes.

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

Comparaison entre conteneur et fluide


6
2017-09-07 16:58



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

.container-fluid redimensionne en permanence lorsque vous modifiez la largeur de votre fenêtre / navigateur de n'importe quel montant.

.container redimensionne des morceaux à plusieurs largeurs, contrôlés par des requêtes média (techniquement on peut dire que c'est "largeur fixe" parce que les valeurs de pixels sont spécifiées, mais si vous vous arrêtez là, les gens peuvent obtenir le impression qu'il ne peut pas changer de taille - c'est-à-dire qu'il ne répond pas.)


5
2018-04-20 12:12



Du point de vue de l'affichage .container vous donne plus de contrôle sur ce que les utilisateurs voient, et il est plus facile de voir ce que les utilisateurs verront, car vous n'avez que 4 variations d'affichage (5 dans le cas du bootstrap 5) car les tailles sont les mêmes que la grille tailles. par exemple. .col-xs, .col-sm, .col, et .col-lg.

Ce que cela signifie, c'est que lorsque vous faites des tests utilisateur si vous testez sur un écran avec les 4 tailles différentes, vous voyez toutes les veriations à l'écran.

En utilisant .container-fluid parce que le witdh est lié à la largeur de la fenêtre, l'affichage est dynamique, donc les varations sont beaucoup plus grandes 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.


2
2018-04-24 01:00