Behälterflüssigkeit gegen Behälter

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?

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.

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!

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

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)

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

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

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.

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 .