Behälterflüssigkeit gegen Behälter

509

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 .containerin ändern .container-fluid.

Wenn man hineinschaut bootstrap.css, scheint .container-fluides identisch zu sein mit .container. Beide haben dasselbe CSS, und jede Instanz von .container-fluidist 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?

FatFingers
quelle
4
Ich habe das gesehen. Es wurde ein paar Umdrehungen zurück gepostet. Behälterflüssigkeit wurde für 3,0 herausgenommen und für 3,1 wieder zugegeben.
FatFingers
1
@Ranveer Definitiv kein Duplikat, da dies auf> BS3 bezieht, das BS2.3 ist - Da diese Frage nicht beantwortet wird, können Sie sie bitte entfernen, um zukünftige Benutzer nicht zu verwirren
PW Kad
Aus den Dokumenten geht hervor, dass die Flüssigkeit die Breite des gesamten Ansichtsfensters abdeckt. (oder ist das der gesamte aktuelle Behälter oder das enthaltende Element?) Warum auf jeden Fall der Name Flüssigkeit? Was ist Flüssigkeit im Gegensatz zum nicht flüssigen Behälter?
Pashute

Antworten:

704

Schnellversion: .container hat eine feste Breite für jede Bildschirmgröße im Bootstrap (xs, sm, md, lg); .container-fluidwird erweitert, um die verfügbare Breite zu füllen.


Der Unterschied zwischen containerund container-fluidergibt sich aus diesen CSS-Zeilen:

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

Abhängig von der Breite des Ansichtsfensters, auf dem die Webseite angezeigt wird, containergibt die Klasse ihrem div eine bestimmte feste Breite. Diese Linien sind in keiner Form vorhanden container-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 .containerElement eine Breite von 970 Pixel. Sie erweitern dann langsam Ihr Browserfenster. Die Breite Ihres .containerwird 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-fluidGröße Ihres Elements wird jedoch ständig geändert, wenn Sie selbst die kleinsten Änderungen an der Breite Ihres Browsers vornehmen.

JKillian
quelle
@jkillian Das heißt, wenn ich ein Layout in voller Breite erstellen möchte, sollte ich es verwenden .container-fluidund .containerfür die Boxbreite ist es richtig?
Hung PD
1
@ TheHung Hängt genau davon ab, was Sie unter "voller Breite" verstehen, aber container-fluidich würde mich in Ihrem Fall dafür entscheiden, soweit ich das
beurteilen
@JKillian Wie viele Themen heutzutage haben sie immer zwei Layouts: Boxed und Wide Layout. Hoffe du kannst verstehen was ich erkläre. Entschuldige mein schlechtes Englisch.
Hung PD
@JKillian Wie wäre es in einigen Fällen mit .container und .container-fluid? Bsp.: ( Design.davidrozando.com/drew-html-v1.1/… ).
Brightweb
5
@JKillian Warum wird Behälterflüssigkeit überhaupt benötigt?
177

Ich denke, Sie sagen, dass ein containervs container-fluidder 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 containerund beobachten die Ränder der Vorschau

Beispiel 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!

Oueasley
quelle
Das Beispiel mit beiden Containertypen enthält Elemente, deren Breite sich ändert.
Ahnbizcad
6
Obwohl ich wusste, was der Unterschied ist, fand ich das Beispiel "beide" aufgrund der Schattierung verwirrend. Ich habe Ihren Code gegabelt, um ein klareres Beispiel für einige zu erstellen : bootply.com/119983 (Außerdem wird in Bootstrap 3 keine .row-Flüssigkeit benötigt. Verwenden Sie einfach .row, ob Ihr Behälter flüssig ist oder nicht.)
Carl Bussema
Carl, dein Link führt zum selben Beispiel wie das Original. Wenn Sie noch Ihre gespaltene Version haben, können Sie den Link posten?
Mike T
6
Hier ist ein gutes Beispiel für einen Link , falls jemand in Zukunft darauf stoßen sollte.
Mike Collins
Danke Mike, das andere Beispiel, sie sahen in meinem Browser genauso aus.
Eric
169

Beide .containerund .container-fluidreagieren (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").

.containerGröß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 .containeres 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-fluidverfügt über die CSS-Eigenschaft width: 100%;, sodass die Granularität bei jeder Bildschirmbreite kontinuierlich angepasst wird.

.container-fluid {
  width: 100%;
}

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

@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;
  }
}

Darüber hinaus

Sie können jedes Element mit fester Breite über Medienabfragen ansprechen lassen, nicht nur über .containerElemente, da Medienabfragen genau so ausgeführt werden, wie .containersie durch Bootstrap im Hintergrund implementiert werden (Code finden Sie in der Antwort von JKillian).

ahnbizcad
quelle
1
Ist das nicht genauere Verhalten für .containerAdaptive im Gegensatz zu Responsive?
Ayjay
@ayjay Sie sprechen einen guten Punkt an. Es wäre nützlich, Begriffe zur Unterscheidung zwischen kontinuierlicher Größenänderung und sprunghafter Größenänderung zu haben.
Ahnbizcad
1
@ayjay Adaptive erkennt den Gerätetyp des Clients und rendert die Dinge serverseitig. Responsive ist es egal, welcher Gerätetyp der Client ist. Es geht nur um die Breite (aufgrund von Medienabfragen). Als solches wird responsiv clientseitig gerendert (CSS, Javascript). Siehe huffingtonpost.com/garrett-goodman/… und amberweinberg.com/is-it-adaptive-or-responsive-web-design IMO responsive ist viel einfacher zu warten und zu erstellen, als völlig unterschiedliche Versionen Ihrer Website für verschiedene Geräte zu haben. Ihr CSS muss jedoch alle Browser berücksichtigen.
Ahnbizcad
@ajay Überarbeitung dieser semantischen Frage von adaptiv und reaktionsschnell ... da adaptiv bedeutet, dass das Gerät erkannt und entsprechend verschiedene HTML / CSS / JS ausgespuckt werden ... ist es denkbar, dass HTML / CSS / JS einen CSS-Stil enthalten kann der Breite: 100%;. und es kann für jedes Gerät sein. In einem solchen Fall ist alles adaptiv, ändert aber immer noch die Größe kontinuierlich und nicht abrupt in Stücken ... Daher ist es semantisch nicht korrekt, es adaptiv oder
reaktionsschnell
24

Verwenden .container-fluidSie diese Option, wenn Sie möchten, dass sich Ihre Seite mit jedem kleinen Unterschied in der Größe des Ansichtsfensters verändert.

Verwenden .containerSie 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:

  • Extra klein: (Nur mobile Auflösung)
  • Klein: 768px (Tabletten)
  • Medium: 992px (Laptops)
  • Groß: 1200px (Laptops / Desktops)
Taimur Alam
quelle
11

Aktualisiert 2019

Der grundlegende Unterschied besteht darin, dass containerdie Skalen reaktionsschnell sind, während dies container-fluidimmer der Fall ist width:100%. Daher werden sie in den Stamm-CSS-Definitionen gleich angezeigt. Wenn Sie jedoch weiter schauen, werden Sie feststellen, dass dies .containeran Medienabfragen gebunden ist.

Bootstrap 4

Das containerhat 5 Breiten ...

.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

Das containerhat 4 Größen. Volle Breite auf xsBildschirmen, und dann variiert die Breite basierend auf den folgenden Medienabfragen.

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

Container vs. Container-Fluid-Demo

Zim
quelle
Das hat nichts mit der Frage zu tun. Nette Infos aber hier nicht relevant.
BeNice
Zim fragte er, was der UNTERSCHIED zwischen .container-fluidund 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.
BeNice
Kurz gesagt, .containerändert die Breite gemäß Medienabfragen und .container-fluiddie Breite in Echtzeit (entsprechend der Breite des Ansichtsfensters)
Hassan Tareq
6

.containerhat einen Pixelwert für die maximale Breite, während .container-fluiddie 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 .)

Sayali
quelle
Scheint, als wäre die gesamte Behälterflüssigkeit besser? Mehr Reaktionsfähigkeit auf Mobiltelefone, was
5

Aus Sicht .containerder 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-fluidist 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.

TrtlBoy
quelle
0

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 .

Tief
quelle