Gerade heruntergeladen 3.1 und in den Dokumenten gefunden ...
Verwandeln Sie jedes Rasterlayout mit fester Breite in ein Layout mit voller Breite, indem Sie Ihr äußerstes
.container
in ändern.container-fluid
.
Wenn man hineinschaut bootstrap.css
, scheint .container-fluid
es identisch zu sein mit .container
. Beide haben dasselbe CSS, und jede Instanz von .container-fluid
ist mit gepaart .container
, und alle Spaltenklassen werden in Prozent angegeben.
Beim Herumspielen mit Beispielen konnte ich keinen Unterschied feststellen, da alles flüssig schien.
Da ich neu bei Bootstrap bin, gehe ich davon aus, dass mir etwas fehlt. Könnte sich jemand eine Minute Zeit nehmen und mich aufklären?
twitter-bootstrap
twitter-bootstrap-3
FatFingers
quelle
quelle
Antworten:
Schnellversion:
.container
hat eine feste Breite für jede Bildschirmgröße im Bootstrap (xs, sm, md, lg);.container-fluid
wird erweitert, um die verfügbare Breite zu füllen.Der Unterschied zwischen
container
undcontainer-fluid
ergibt sich aus diesen CSS-Zeilen:Abhängig von der Breite des Ansichtsfensters, auf dem die Webseite angezeigt wird,
container
gibt die Klasse ihrem div eine bestimmte feste Breite. Diese Linien sind in keiner Form vorhandencontainer-fluid
, daher ändert sich ihre Breite jedes Mal, wenn sich die Breite des Ansichtsfensters ändert.Angenommen, Ihr Browserfenster ist 1000 Pixel breit. Da es größer als die Mindestbreite von 992 Pixel ist, hat Ihr
.container
Element eine Breite von 970 Pixel. Sie erweitern dann langsam Ihr Browserfenster. Die Breite Ihres.container
wird sich erst ändern, wenn Sie 1200px erreicht haben. Bei dieser Breite springt sie auf 1170px und bleibt dies auch bei größeren Browserbreiten.Die
.container-fluid
Größe Ihres Elements wird jedoch ständig geändert, wenn Sie selbst die kleinsten Änderungen an der Breite Ihres Browsers vornehmen.quelle
.container-fluid
und.container
für die Boxbreite ist es richtig?container-fluid
ich würde mich in Ihrem Fall dafür entscheiden, soweit ich dasIch denke, Sie sagen, dass ein
container
vscontainer-fluid
der Unterschied zwischen reaktionsschnell und nicht reaktionsschnell auf das Raster ist. Dies ist nicht wahr ... was sagt ist, dass die Breite nicht fest ist ... ihre volle Breite!Dies ist schwer zu erklären, schauen wir uns also die Beispiele an
Beispiel eins
container-fluid
::http://www.bootply.com/119981
Sie sehen also, wie der Container den gesamten Bildschirm einnimmt ... das ist ein
container-fluid
.Schauen wir uns nun den anderen nur normal an
container
und beobachten die Ränder der VorschauBeispiel zwei
container
http://www.bootply.com/119982
Sehen Sie jetzt den Leerraum im Beispiel? Das liegt daran, dass es eine feste Breite ist
container
! Es könnte sinnvoller sein, beide Beispiele in zwei verschiedenen Registerkarten zu öffnen und hin und her zu wechseln.BEARBEITEN
Besser noch hier ist ein Beispiel mit beiden Containern gleichzeitig! Jetzt können Sie wirklich den Unterschied erkennen!
http://www.bootply.com/119983
Ich hoffe das hat ein bisschen geklärt!
quelle
Beide
.container
und.container-fluid
reagieren (dh sie ändern das Layout basierend auf der Bildschirmbreite), aber auf unterschiedliche Weise (ich weiß, die Benennung lässt es nicht so klingen).Kurze Antwort:
.container
ist nervös / abgehackt Größe ändern, und.container-fluid
ist eine kontinuierliche / feine Größenänderung bei einer Breite von 100%.Aus funktionaler Sicht:
.container-fluid
Ändern Sie die Größe kontinuierlich, wenn Sie die Breite Ihres Fensters / Browsers um einen beliebigen Betrag ändern, und lassen Sie im Gegensatz dazu keine zusätzlichen Leerstellen an den Seiten frei.container
. (Daher die Benennung: "flüssig" im Gegensatz zu "digital", "diskret", "zerlegt" oder "quantisiert")..container
Größe in Stücken bei mehreren bestimmten Breiten ändern. Mit anderen Worten, es werden verschiedene spezifische, auch "feste" Breiten, verschiedene Bereiche von Bildschirmbreiten sein.Semantik: "feste Breite"
Sie können sehen, wie Namensverwirrung entstehen kann. Technisch kann man sagen, dass
.container
es sich um "feste Breite" handelt, aber es ist nur in dem Sinne fest, dass die Größe nicht bei jeder granularen Breite geändert wird. Es ist eigentlich nicht "fest" in dem Sinne, dass es immer bei einer bestimmten Pixelbreite bleibt, da es tatsächlich die Größe ändern kann.Aus einer fundamentalen Perspektive:
.container-fluid
verfügt über die CSS-Eigenschaftwidth: 100%;
, sodass die Granularität bei jeder Bildschirmbreite kontinuierlich angepasst wird..container
hat so etwas wie "width = 800px" (oder em, rem usw.), einen bestimmten Pixelbreitenwert bei verschiedenen Bildschirmbreiten. Dies führt natürlich dazu, dass die Elementbreite abrupt auf eine andere Breite springt, wenn die Bildschirmbreite einen Schwellenwert für die Bildschirmbreite überschreitet. Dieser Schwellenwert wird durch CSS3-Medienabfragen bestimmt, mit denen Sie verschiedene Stile für verschiedene Bedingungen anwenden können, z. B. Bildschirmbreitenbereiche.Darüber hinaus
Sie können jedes Element mit fester Breite über Medienabfragen ansprechen lassen, nicht nur über
.container
Elemente, da Medienabfragen genau so ausgeführt werden, wie.container
sie durch Bootstrap im Hintergrund implementiert werden (Code finden Sie in der Antwort von JKillian).quelle
.container
Adaptive im Gegensatz zu Responsive?Verwenden
.container-fluid
Sie diese Option, wenn Sie möchten, dass sich Ihre Seite mit jedem kleinen Unterschied in der Größe des Ansichtsfensters verändert.Verwenden
.container
Sie diese Option, wenn Ihre Seite auf nur 4 Arten von Größen verschoben werden soll , die auch als "Haltepunkte" bezeichnet werden.Die ihrer Größe entsprechenden Haltepunkte sind:
quelle
Aktualisiert 2019
Der grundlegende Unterschied besteht darin, dass
container
die Skalen reaktionsschnell sind, während diescontainer-fluid
immer der Fall istwidth:100%
. Daher werden sie in den Stamm-CSS-Definitionen gleich angezeigt. Wenn Sie jedoch weiter schauen, werden Sie feststellen, dass dies.container
an Medienabfragen gebunden ist.Bootstrap 4
Das
container
hat 5 Breiten ...Bootstrap 3
Das
container
hat 4 Größen. Volle Breite aufxs
Bildschirmen, und dann variiert die Breite basierend auf den folgenden Medienabfragen.Container vs. Container-Fluid-Demo
quelle
.container-fluid
und sei.container
. Das war die Information, nach der ich gesucht habe. Ihre Informationen sind interessant, aber als ich nach der Antwort suchte, verwirrte mich das für ein paar Minuten. Wenn es NACH den Antworten aufgelistet wäre, die die Frage beantwortet hätten, wäre das großartig, aber SO scheint uns nicht zu erlauben, unsere eigene Bestellung vorzuschlagen. Und als ich meinen ursprünglichen Kommentar las, war mir nicht so klar, wie ich hätte sein können. Trotzdem danke für die Info..container
ändert die Breite gemäß Medienabfragen und.container-fluid
die Breite in Echtzeit (entsprechend der Breite des Ansichtsfensters).container
hat einen Pixelwert für die maximale Breite, während.container-fluid
die maximale Breite 100% beträgt..container-fluid
Ändern Sie die Größe kontinuierlich, wenn Sie die Breite Ihres Fensters / Browsers um einen beliebigen Betrag ändern..container
Größenänderung in Blöcken mit mehreren bestimmten Breiten, gesteuert durch Medienabfragen (technisch können wir sagen, dass es sich um eine „feste Breite“ handelt, da Pixelwerte angegeben werden. Wenn Sie jedoch dort anhalten, haben die Benutzer möglicherweise den Eindruck, dass sich die Größe nicht ändern kann - dh nicht reagiert .)quelle
Aus Sicht
.container
der Anzeige haben Sie mehr Kontrolle darüber, was die Benutzer sehen, und es ist einfacher zu sehen, was die Benutzer sehen, da Sie nur 4 Anzeigevarianten haben (5 im Fall von Bootstrap 5), da sich die Größen auf die beziehen gleich wie die Gittergrößen. zB.col-xs
,.col-sm
,.col
, und.col-lg
.Dies bedeutet, dass beim Testen von Benutzern, wenn Sie auf einem Display mit 4 verschiedenen Größen testen, alle Überprüfungen im Display angezeigt werden.
Bei der Verwendung
.container-fluid
ist die Anzeige dynamisch, da das witdh mit der Breite des Ansichtsfensters zusammenhängt. Daher sind die Abweichungen viel größer und Benutzer mit sehr großen Bildschirmen oder ungewöhnlichen Bildschirmbreiten sehen möglicherweise Ergebnisse, die Sie nicht erwartet haben.quelle
Sie haben Recht in 3.1 .container-fluid und .container sind gleich und funktionieren wie Container, aber wenn Sie sie entfernen, funktioniert es wie .container-fluid (volle Breite). Sie hatten .container-fluid für "Mobile First Approach" entfernt, aber jetzt ist es wieder in 3.3.4 (und sie werden anders funktionieren)
Um neuesten Bootstrap zu erhalten , lesen Sie bitte diesen Beitrag auf Stackoverflow es wird helfen , check it out .
quelle