Was ist der Unterschied zwischen den Bootstrap-Klassen .container und .container-fluid?

Question

Nur heruntergeladen 3.1 und fand in den Dokumenten...

Ändern Sie jedes feste Rasterlayout in ein Vollbreitenlayout, indem Sie Ihr äußerstes .container in .container-fluid ändern.

In bootstrap.css scheint es, dass .container-fluid identisch mit .container ist. Beide haben dasselbe CSS, und jede Instanz von .container-fluid ist mit .container gepaart, und alle Spaltenklassen sind in Prozentangaben angegeben.

Als ich mit Beispielen herumspielte, konnte ich keinen Unterschied sehen, da alles fließend schien.

Was ist der Unterschied zwischen den Bootstrap-Klassen .container und .container-fluid?

Answer 1

.container hat einen maximalen Breitenpixelwert, während .container-fluid eine maximale Breite von 100% hat.

.container-fluid passt sich kontinuierlich an, wenn Sie die Breite Ihres Fensters/Browsers um beliebige Beträge ändern.

.container passt sich in bestimmten Breitenstufen in Blöcken an, kontrolliert durch Media Queries (technisch gesehen können wir sagen, dass es eine "feste Breite" hat, da Pixelwerte angegeben sind, aber wenn man nur bis hierhin liest, könnte man den Eindruck bekommen, dass es sich nicht ändern kann - also nicht responsiv).

Answer 2

Von einer Anzeigeperspektive aus gibt Ihnen .container mehr Kontrolle darüber, was die Benutzer sehen, und erleichtert es zu sehen, was die Benutzer sehen werden, da Sie nur 4 Variationen der Anzeige haben (5 im Fall von Bootstrap 5), da die Größen mit den Rastergrößen übereinstimmen. z.B. .col-xs, .col-sm, .col und .col-lg.

Das bedeutet, dass Sie bei Benutzertests, wenn Sie auf Displays mit den 4 verschiedenen Größen testen, alle Variationen in der Anzeige sehen.

Bei Verwendung von .container-fluid ist die Anzeige dynamisch, da die Breite sich auf die Bildschirmbreite bezieht, daher sind die Variationen viel größer und Benutzer mit sehr großen Bildschirmen oder ungewöhnlichen Bildschirmbreiten können Ergebnisse sehen, die Sie nicht erwartet haben.

Answer 3

Du hast recht in 3.1 .container-fluid und .container sind gleich und funktionieren wie Container, aber wenn du sie entfernst, funktioniert es wie .container-fluid (volle Breite). Sie hatten .container-fluid für den "Mobile First Approach" entfernt, aber jetzt ist es zurück in 3.3.4 (und sie werden sich unterschiedlich verhalten)

Um das neueste Bootstrap zu erhalten, lies bitte diesen Beitrag auf Stackoverflow, er wird helfen schau es dir an.