Was ist der Unterschied zwischen col-lg-*, col-md-* und col-sm-* in Bootstrap?

Question

Was ist der Unterschied zwischen col-lg-* , col-md-* und col-sm-* in Twitter Bootstrap?

Answer 1

Aktualisiert 2020...

Bootstrap 5

In Bootstrap 5 (alpha) gibt es eine neue Größe -xxl-:

col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
col-xxl-* - 1400px

Bootstrap 5 Grid Demo

---

Bootstrap 4

In Bootstrap 4 gibt es eine neue Größe -xl-, siehe diese Demo. Auch das -xs- Infix wurde entfernt, daher sind die kleinsten Spalten einfach col-1, col-2.. col-12, etc..

col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px

Bootstrap 4 Grid Demo

Zusätzlich enthält Bootstrap 4 neue auto-layout Spalten. Diese haben auch reaktionsfähige Breakpoints (col, col-sm, col-md, etc..), aber keine definierten % Breiten. Daher füllen die auto-layout Spalten gleiche Breite über die Zeile.

---

Bootstrap 3

Das Grid von Bootstrap 3 kommt in 4 Stufen (oder "Breakpoints")...

• Extra klein (für Smartphones .col-xs-*)
• Klein (für Tablets .col-sm-*)
• Mittel (für Laptops .col-md-*)
• Groß (für Laptops/Desktops .col-lg-*).

Diese Grid-Größen ermöglichen es Ihnen, das Grid-Verhalten bei unterschiedlichen Breiten zu steuern. Die verschiedenen Stufen werden durch CSS Media Queries kontrolliert.

Also in Bootstraps 12-Spalten Grid...

col-sm-3 ist 3 von 12 Spalten breit (25%) bei einer typischen kleinen Gerätebreite (> 768 Pixel)

col-md-3 ist 3 von 12 Spalten breit (25%) bei einer typischen mittleren Gerätebreite (> 992 Pixel)

---

Die kleinere Stufe (xs, sm oder md) definiert auch die Größe für größere Bildschirmbreiten. Also, für die gleiche Größe einer Spalte auf allen Stufen, setzen Sie einfach die Breite für den kleinsten Viewport fest...

..

ist dasselbe wie,

..

Größere Stufen sind implizit. Denn col-sm-3 bedeutet 3 Einheiten auf sm-und-up, es sei denn, es wird explizit von einer größeren Stufe mit einer anderen Größe überschrieben.

xs(Standard) > überschrieben von sm > überschrieben von md > überschrieben von lg

---

Kombinieren Sie die Klassen, um die Spaltenbreiten auf unterschiedlichen Grid-Größen zu ändern. Dies schafft ein responsives Layout.

..

Die Grids sm, md und lg werden alle vertikal gestapelt auf Bildschirmen/Viewports kleiner als 768 Pixel. Hier kommt das xs Grid zum Einsatz. Spalten, die die col-xs-* Klassen verwenden, werden nicht vertikal gestapelt und skalieren weiterhin auf den kleinsten Bildschirmen.

Ändern Sie die Größe Ihres Browsers mit dieser Demo und Sie werden die Skalierungseffekte des Grids sehen.

---

Dieser Artikel erklärt mehr darüber, wie das Bootstrap Grid funktioniert

Answer 2

Die Bootstrap-Dokumentation erklärt es zwar, aber es hat mir trotzdem eine Weile gedauert, bis ich es verstanden habe. Es macht mehr Sinn, wenn ich es mir auf eine von zwei Arten selbst erkläre:

Wenn man sich vorstellt, dass die Spalten anfangs horizontal angeordnet sind, kann man wählen, wann sie gestapelt werden sollen.

Zum Beispiel, wenn man mit den Spalten startet: A B C

Entscheidet man, wann sie gestapelt werden sollen, wie folgt:

A

B

C

Wenn man col-lg wählt, werden die Spalten gestapelt, wenn die Breite < 1200px beträgt.

Wenn man col-md wählt, werden die Spalten gestapelt, wenn die Breite < 992px beträgt.

Wenn man col-sm wählt, werden die Spalten gestapelt, wenn die Breite < 768px beträgt.

Wenn man col-xs wählt, werden die Spalten nie gestapelt.

Andererseits, wenn man sich vorstellt, dass die Spalten anfangs gestapelt sind, kann man wählen, ab wann sie horizontal werden sollen:

Wenn man col-sm wählt, werden die Spalten horizontal, wenn die Breite >= 768px beträgt.

Wenn man col-md wählt, werden die Spalten horizontal, wenn die Breite >= 992px beträgt.

Wenn man col-lg wählt, werden die Spalten horizontal, wenn die Breite >= 1200px beträgt.

Answer 3

Aus Twitter Bootstrap-Dokumentation:

• kleines Raster (768px) = .col-sm-*,
• mittleres Raster (992px) = .col-md-*,
• großes Raster (1200px) = .col-lg-*.

Answer 4

Lassen Sie uns Bootstrap unkomplizieren!

Beachten Sie, wie das col-sm die 100% Breite einnimmt (anderweitig ausgedrückt, in eine neue Zeile umbricht) unterhalb von 576px, aber col nicht. Sie können die aktuelle Breite oben in der Mitte des Gifs sehen.

Hier kommt der Code:

        col
        col
        col

        col-sm
        col-sm
        col-sm

Bootstrap ordnet standardmäßig alle Spalten (col) in einer einzelnen Zeile mit gleicher Breite an. In diesem Fall würden drei col jeweils 100%/3 Breite einnehmen, unabhängig von der Bildschirmgröße. Sie können das im Gif sehen.

Was ist, wenn wir nur eine Spalte pro Zeile rendern möchten, d.h. jedem col nur für kleinere Bildschirme eine Breite von 100% geben möchten? Hier kommen die col-xx-Klassen ins Spiel!

Ich habe col-sm verwendet, weil ich die Spalten unter 576px in separate Zeilen aufbrechen wollte. Diese 4 col-xx-Klassen werden von Bootstrap für verschiedene Anzeigegeräte wie Mobilgeräte, Tablets, Laptops, große Monitore usw. bereitgestellt.

Also, col-sm würde unter 576px umbrechen, col-md würde unter 768px umbrechen, col-lg würde unter 992px umbrechen und col-xl würde unter 1200px umbrechen

Beachten Sie, dass es in Bootstrap 4 keine col-xs-Klasse gibt.

Das fasst das Ganze ziemlich gut zusammen. Sie können zur Arbeit zurückkehren.

---

Aber es gibt noch ein bisschen mehr. Jetzt kommen die col-* und col-xx-* zur Anpassung der Breite.

Erinnern Sie sich im obigen Beispiel daran, dass col oder col-xx die gleiche Breite in einer Zeile einnehmen. Wenn wir also einer bestimmten col mehr Breite geben möchten, können wir das tun.

Die Bootstrap-Zeile ist in 12 Teile unterteilt, also gab es im obigen Beispiel 3 col, so dass jeder 12/3 = 4 Teile einnimmt. Diese Teile können als Maßeinheit für die Breite betrachtet werden.

Wir könnten das auch im Format col-* schreiben, also col-4 so :

  col
  col
  col

Und es hätte keinen Unterschied gemacht, denn standardmäßig gibt Bootstrap allen col die gleiche Breite (4 + 4 + 4 = 12).

Aber, was ist, wenn wir dem 1. col 7 Teile, dem 2. col 3 Teile und dem 3. col den Rest 2 Teile (12-7-3 = 2) geben möchten (7+3+2, also insgesamt 12)? Das können wir ganz einfach tun:

  col-7
  col-3
  col-2

und Sie können auch die Breite der col-xx-*-Klassen anpassen.

    col-sm-7
    col-sm-3
    col-sm-2

Wie sieht es in Aktion aus?

Was ist, wenn die Summe der col größer als 12 ist? Dann verschiebt/justiert sich die col zur nächsten Zeile. Ja, es können beliebig viele Spalten für eine Zeile vorhanden sein!

        col-12
        col-9
        col-6
        col-6

Was ist, wenn wir für große Bildschirme 3 Spalten in einer Zeile wollen, aber diese Spalten für kleine Bildschirme in 2 Zeilen aufteilen möchten?

    col-12 col-sm OBEN
    col col-sm
    col col-sm

Sie können hier herumspielen: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Answer 5

Ich denke, der verwirrende Aspekt daran ist, dass BootStrap 3 ein mobil orientiertes responsives System ist und nicht erklärt, wie sich dies auf die col-xx-n Hierarchie in diesem Teil der Bootstrap-Dokumentation auswirkt. Dies lässt einen darüber nachdenken, was auf kleineren Geräten passiert, wenn man einen Wert für größere Geräte wählt, und man fragt sich, ob es notwendig ist, mehrere Werte anzugeben. (Das ist nicht der Fall)

Ich würde versuchen, dies zu klären, indem ich sage, dass... Kleinere Kornarten (xs, sm) versuchen, das Layout auf kleineren Bildschirmen beizubehalten, und größere Typen (md, lg) werden nur auf größeren Bildschirmen korrekt angezeigt, aber auf kleineren Geräten Spalten umbrechen. Die in vorherigen Beispielen zitierten Werte beziehen sich auf die Schwelle, bei der Bootstrap das Aussehen degradiert, um auf den verfügbaren Bildschirmplatz zu passen.

Was dies in der Praxis bedeutet, ist, dass wenn Sie die Spalten auf col-xs-n setzen, sie auch auf sehr kleinen Bildschirmen korrekt erscheinen, bis das Fenster auf eine Größe fällt, bei der die Seite nicht mehr korrekt angezeigt werden kann. Dies sollte bedeuten, dass Geräte mit einer Breite von 768px oder weniger Ihre Tabelle so anzeigen sollten, wie Sie sie entworfen haben, anstatt in degradierter (einzeln oder umbrochene Spaltenform). Natürlich hängt dies immer noch vom Inhalt der Spalten ab, und das ist der springende Punkt. Wenn die Seite versucht, mehrere Spalten mit großen Daten nebeneinander auf einem kleinen Bildschirm anzuzeigen, dann werden die Spalten natürlich in einer schrecklichen Weise umbrechen, wenn Sie nicht darauf vorbereitet sind. Daher können Sie je nach Daten innerhalb der Spalten entscheiden, an welcher Stelle das Layout geopfert wird, um den Inhalt angemessen anzuzeigen.

Zum Beispiel: Wenn Ihre Seite drei col-sm-n Spalten enthält, wird Bootstrap die Spalten in Zeilen umbrechen, wenn die Bildschirmbreite unter 992px fällt. Das bedeutet, dass die Daten immer noch sichtbar sind, aber vertikales Scrollen erforderlich ist, um sie anzuzeigen. Wenn Sie nicht möchten, dass Ihr Layout degradiert, wählen Sie xs (sofern Ihre Daten auf einem Gerät mit niedrigerer Auflösung angemessen in drei Spalten angezeigt werden können)

Wenn die horizontale Position der Daten wichtig ist, sollten Sie versuchen, Werte mit geringerer Granularität zu wählen, um die visuelle Natur beizubehalten. Wenn die Position weniger wichtig ist, aber die Seite auf allen Geräten sichtbar sein muss, sollte ein höherer Wert verwendet werden.

Wenn Sie col-lg-n wählen, werden die Spalten korrekt angezeigt, bis die Bildschirmbreite unter die xs-Schwelle von 1200px fällt.