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

Schnellversion: .container hat in Bootstrap (xs, sm, md, lg) eine feste Breite für jede Bildschirmgröße; .container-fluid passt sich der verfügbaren Breite an.

---

Der Unterschied zwischen container und container-fluid ergibt 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 Viewports, auf dem die Webseite angezeigt wird, erhält das container-Element seine spezifische feste Breite. Diese Zeilen existieren in keiner Form für container-fluid, daher ändert sich seine Breite jedes Mal, wenn sich die Viewport-Breite ändert.

Angenommen, Ihr Browserfenster ist 1000px breit. Da es größer ist als die min-width von 992px, wird Ihr .container-Element eine Breite von 970px haben. Wenn Sie dann langsam Ihr Browserfenster verbreitern, wird die Breite Ihres .container-Elements nicht ändern, bis Sie 1200px erreichen, woraufhin es auf 1170px springt und für größere Browserbreiten so bleibt.

Ihr .container-fluid-Element hingegen wird sich ständig anpassen, wenn Sie selbst die geringsten Änderungen an der Breite Ihres Browsers vornehmen.

Answer 2

Ich glaube, du sagst, dass ein container vs container-fluid der Unterschied zwischen responsiv und nicht responsiv für das Raster ist. Das ist nicht wahr...es sagt, dass die Breite nicht festgelegt ist...sie ist vollständig in der Breite!

Das ist schwer zu erklären, also schauen wir uns die Beispiele an

---

Beispiel eins

container-fluid:

http://www.bootply.com/119981

Siehst du, wie der Container den gesamten Bildschirm einnimmt...das ist ein container-fluid.

Lass uns jetzt den anderen anschauen, einfach nur ein normaler container und schau dir die Ränder der Vorschau an

Beispiel zwei

container

http://www.bootply.com/119982

Siehst du jetzt den weißen Raum im Beispiel? Das liegt daran, dass es ein Container mit fester Breite ist container! Es könnte sinnvoller sein, beide Beispiele in zwei verschiedenen Tabs zu öffnen und hin und her zu wechseln.

BEARBEITEN

Noch besser, hier ist ein Beispiel mit beiden Containern gleichzeitig! Jetzt kannst du wirklich den Unterschied erkennen!

http://www.bootply.com/119983

Ich hoffe, das hat ein wenig Klarheit gebracht!

Answer 3

Beide .container und .container-fluid sind responsive (d. h. sie ändern das Layout basierend auf der Bildschirmbreite), aber auf unterschiedliche Weise (ich weiß, die Benennung lässt das nicht vermuten).

Kurze Antwort:

.container ändert sich ruckartig, und

.container-fluid ändert sich kontinuierlich bei einer Breite von 100%.

Aus funktionaler Sicht:

.container-fluid passt sich kontinuierlich an, wenn Sie die Breite Ihres Fensters/Browsers beliebig ändern, ohne jemals zusätzlichen leeren Platz an den Seiten zu hinterlassen, im Gegensatz zu .container. (Daher die Benennung: "fluid" im Gegensatz zu "digital", "diskret", "segmentiert" oder "quantisiert").

.container ändert sich in Schritten bei verschiedenen festgelegten Breiten. Mit anderen Worten, es gibt verschiedene bestimmte bzw. "feste" Breiten für verschiedene Bereich von Bildschirmbreiten.

Semantik: "feste Breite"

Man kann sehen, wie Verwirrung bei der Benennung entstehen kann. Technisch gesehen kann man sagen, dass .container eine "feste Breite" hat, aber sie ist nur in dem Sinne festgelegt, dass sie sich nicht bei jeder granularen Breite ändert. Tatsächlich ist sie nicht "fest" im Sinne von immer bei einer bestimmten Pixelbreite bleibt, da sie tatsächlich die Größe ändern kann.

Aus grundlegender Perspektive:

.container-fluid hat die CSS-Eigenschaft width: 100%;, so dass sie sich kontinuierlich bei jeder Bildschirmbreite anpasst.

.container-fluid {
  width: 100%;
}

.container hat etwas wie "width = 800px" (oder em, rem usw.), einen bestimmten Pixelwert bei verschiedenen Bildschirmbreiten. Dies führt natürlich dazu, dass die Elementbreite abrupt auf eine andere Breite springt, wenn die Bildschirmbreite einen bestimmten Schwellenwert überschreitet. Und dieser Schwellenwert wird durch CSS3 Media Queries gesteuert, die es ermöglichen, verschiedene Stile für verschiedene Bedingungen anzuwenden, 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 Media Queries responsiv machen, nicht nur .container Elemente, da Media Queries genau die Methode sind, wie .container im Hintergrund von Bootstrap implementiert wird (siehe Antwort von JKillian für den Code).

Answer 4

Verwenden Sie .container-fluid, wenn Sie möchten, dass Ihre Seite mit jeder kleinen Änderung in der Größe des Ansichtsfensters mitverändert wird.

Verwenden Sie .container, wenn Sie möchten, dass Ihre Seite nur auf 4 Arten von Größen reagiert, die auch als "Breakpoints" bekannt sind.

Die Breakpoints entsprechen den folgenden Größen:

• Extra Small: (Nur Mobilauflösung)
• Small: 768px (Tablets)
• Medium: 992px (Laptops)
• Large: 1200px (Laptops/Desktops)

Answer 5

Aktualisiert 2019

Der grundlegende Unterschied besteht darin, dass container responsiv skaliert, während container-fluid immer width:100% ist. Daher erscheinen sie in den CSS-Definitionen gleich, aber wenn man genauer hinschaut, sieht man, dass .container an Medienabfragen gebunden ist.

Bootstrap 4

Der container hat 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

Der container hat 4 Größen. Vollbreite auf xs Bildschirmen, und dann variiert seine 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;
        }
    }

Demo container vs. container-fluid