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

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

Aktualisiert 2019 ...

Das Bootstrap 3- Raster besteht aus 4 Ebenen (oder "Haltepunkten") ...

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

Mit diesen Rastergrößen können Sie das Rasterverhalten in verschiedenen Breiten steuern. Die verschiedenen Ebenen werden durch CSS- Medienabfragen gesteuert .

Also im 12-Spalten-Raster von Bootstrap ...

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

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

Die kleinere Stufe ( xs, smoder md) definiert auch die Größe für größere Bildbreiten . Stellen Sie für die Spalte mit der gleichen Größe auf allen Ebenen einfach die Breite für das kleinste Ansichtsfenster ein ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> ist das gleiche wie,

<div class="col-sm-3">..</div>

Größere Ebenen sind impliziert. Denn col-sm-3bedeutet 3 units on sm-and-up, es sei denn, dies wird ausdrücklich von einer größeren Ebene überschrieben, die eine andere Größe verwendet.

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

Kombinieren Sie die Klassen, um Änderungsspaltenbreiten für verschiedene Rastergrößen zu verwenden . Dadurch wird ein ansprechendes Layout erstellt.

<div class="col-md-3 col-sm-6">..</div>

Die smund mdund lgGitter werden alle vertikal auf Bildschirmen / Ansichtsfenstern mit weniger als 768 Pixel "gestapelt". Hier xspasst das Raster hinein. Spalten, die die col-xs-*Klassen verwenden, werden nicht vertikal gestapelt und auf den kleinsten Bildschirmen weiter verkleinert.

Ändern Sie die Größe Ihres Browsers mithilfe dieser Demo und Sie werden die Raster-Skalierungseffekte sehen.

Bootstrap 4

In Bootstrap 4 gibt es eine neue -xl-Größe, siehe diese Demo . Auch das -xs-Infix wurde entfernt , so dass kleinste Spalten einfach sind 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

Darüber hinaus enthält Bootstrap 4 neue Spalten für das automatische Layout . Diese haben auch reaktions Stützpunkte ( col, col-sm, col-md, etc ..), haben aber nicht definiert% Breiten. Daher füllen die Spalten für das automatische Layout die gleiche Breite in der gesamten Zeile.

In diesem Artikel wird mehr über das Bootstrap-Raster erläutert

Die Bootstrap- Dokumente erklären es zwar, aber ich habe noch eine Weile gebraucht , um es zu bekommen. Es ist sinnvoller, wenn ich es mir auf zwei Arten erkläre:

Wenn Sie daran denken, dass die Spalten horizontal beginnen, können Sie auswählen, wann sie gestapelt werden sollen .

Wenn Sie beispielsweise mit Spalten beginnen: ABC

Sie entscheiden, wann sie so gestapelt werden sollen:

EIN

B.

C.

Wenn Sie col-lg wählen, werden die Spalten gestapelt, wenn die Breite <1200px ist.

Wenn Sie col-md auswählen, werden die Spalten gestapelt, wenn die Breite <992px ist.

Wenn Sie col-sm auswählen, werden die Spalten gestapelt, wenn die Breite <768px ist.

Wenn Sie col-xs auswählen, werden die Spalten niemals gestapelt.

Wenn Sie jedoch daran denken, dass die Spalten gestapelt beginnen, können Sie auswählen, an welchem ​​Punkt sie horizontal werden :

Wenn Sie col-sm auswählen, werden die Spalten horizontal, wenn die Breite> = 768px ist.

Wenn Sie col-md wählen, werden die Spalten horizontal, wenn die Breite> = 992px ist.

Wenn Sie col-lg wählen, werden die Spalten horizontal, wenn die Breite> = 1200px ist.

Aus der Twitter Bootstrap-Dokumentation :

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

Ich denke, der verwirrende Aspekt dabei ist die Tatsache, dass BootStrap 3 ein mobiles First-Responsive-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 Sie sich fragen, was auf kleineren Geräten passiert, wenn Sie einen Wert für größere Geräte auswählen, und Sie fragen sich, ob mehrere Werte angegeben werden müssen. (Du nicht)

Ich würde versuchen, dies zu verdeutlichen, indem ich feststelle, dass ... Niedrigere Körnungstypen (xs, sm) versuchen, das Layout auf kleineren Bildschirmen beizubehalten, und größere Typen (md, lg) nur auf größeren Bildschirmen korrekt angezeigt werden, Spalten jedoch auf kleineren Geräten umbrechen. Die in den vorherigen Beispielen angegebenen Werte beziehen sich auf den Schwellenwert, bei dem der Bootstrap das Erscheinungsbild verschlechtert, um es an den verfügbaren Bildschirm anzupassen.

In der Praxis bedeutet dies, dass die Spalten, wenn Sie col-xs-n erstellen, auch auf sehr kleinen Bildschirmen korrekt angezeigt werden, bis das Fenster auf eine Größe fällt, die so restriktiv ist, dass die Seite nicht richtig 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, und nicht in verschlechterter Form (einzelne oder umschlossene Spaltenform). Offensichtlich 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, werden die Spalten natürlich auf schreckliche Weise umbrochen, wenn Sie dies nicht berücksichtigt haben. Abhängig von den Daten in den Spalten können Sie daher den Punkt bestimmen, an dem das Layout geopfert wird, um den Inhalt angemessen anzuzeigen.

Beispiel: Wenn Ihre Seite drei col-sm-n-Spalten enthält, würde der Bootstrap die Spalten in Zeilen umbrechen, wenn die Seitenbreite unter 992px fällt. Dies bedeutet, dass die Daten weiterhin sichtbar sind, jedoch ein vertikales Scrollen erforderlich ist, um sie anzuzeigen. Wenn Sie nicht möchten, dass sich Ihr Layout verschlechtert, wählen Sie xs (solange Ihre Daten auf einem Gerät mit niedrigerer Auflösung in drei Spalten angemessen angezeigt werden können).

Wenn die horizontale Position der Daten wichtig ist, sollten Sie versuchen, niedrigere Granularitätswerte zu wählen, um die visuelle Natur beizubehalten. Wenn die Position weniger wichtig ist, die Seite jedoch 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 den xs-Schwellenwert von 1200px fällt.

Gerätegrößen und Klassenpräfix:

• Extra kleine Geräte Telefone (<768px) - .col-xs-
• Tablets für kleine Geräte (≥768px) - .col-sm-
• Mittlere Geräte Desktops (≥992px) - .col-md-
• Desktops für große Geräte (≥1200px) - .col-lg-

Rasteroptionen:

Referenz: Rastersystem

TL; DR

.col-X-Ybedeutet , dass Sie dieses Element bei Bildschirmgröße X und höher strecken, um Y-Spalten zu füllen .

Bootstrap bietet ein Raster von 12 Spalten pro .row, also bedeutet Y = 3 Breite = 25%.

xs, sm, md, lg sind die Größen für Smartphone, Tablet, Laptop bzw. Desktop.

Wenn Sie unterschiedliche Breiten auf unterschiedlichen Bildschirmgrößen angeben, können Sie die Größe auf kleineren Bildschirmen vergrößern.

Beispiel

<div class="col-lg-6 col-xs-12">

Bedeutung: 50% Breite auf Desktops, 100% Breite auf Mobilgeräten, Tablets und Laptops.

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

Ein besonderer Fall: Stellen Sie vor dem Erlernen des Bootstrap-Grid-Systems sicher, dass der Browser-Zoom auf 100% (hundertprozentig) eingestellt ist. Beispiel: Wenn die Bildschirmauflösung (1600 x 900 Pixel) und der Browser-Zoom 175% beträgt, werden "Bootstrap-Ped" -Elemente gestapelt.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Chrome-Zoom 100%

Browser 100 Prozent - Elemente horizontal platziert

Chrome-Zoom 175%

Browser 175 Prozent - gestapelte Elemente

Lassen Sie uns Bootstrap unkompliziert machen!

Beachten Sie, wie der col-sm die 100% -Breite einnimmt (mit anderen Worten, er bricht in eine neue Zeile ein) 576px, col jedoch nicht. Sie können die aktuelle Breite in der oberen Mitte in GIF sehen.

Hier kommt der Code:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

Bootstrap richtet standardmäßig alle Spalten (col) in einer einzelnen Zeile mit gleicher Breite aus. In diesem Fall colbelegen drei unabhängig von der Bildschirmgröße jeweils 100% / 3 Breite. Sie können das in gif bemerken.

Was ist nun, wenn wir nur eine Spalte pro Zeile rendern möchten, dh jeder Spalte 100% Breite geben möchten, aber nur für kleinere Bildschirme ? Jetzt kommt der col-xxUnterricht!

Ich habe verwendet, col-smweil ich die Spalten in separate Zeilen unter 576px aufteilen wollte. Diese 4 col-xxKlassen werden von Bootstrap für verschiedene Anzeigegeräte wie Handys, Tablets, Laptops, große Monitore usw. bereitgestellt.

So col-smwürde unter 576px brechen, col-mdunter 768px brechen würde, col-lgunter 992px brechen würde und col-xlwürde brechen unter 1200px

Beachten Sie, dass col-xsBootstrap 4 keine Klasse enthält.

Das fasst so ziemlich alles zusammen. Sie können wieder arbeiten.

Aber es steckt noch ein bisschen mehr dahinter. Jetzt kommt das col-*und col-xx-*zum Anpassen der Breite.

Denken Sie daran, dass ich im obigen Beispiel erwähnt habe, dass coloder col-xxdie gleiche Breite in einer Reihe nimmt. Wenn wir also einem bestimmten mehr Breite geben möchten, colkönnen wir dies tun.

Die Bootstrap-Zeile ist in 12 Teile unterteilt, sodass im obigen Beispiel 3 vorhanden waren, colsodass jeder 12/3 = 4 Teile benötigt. Sie können diese Teile als eine Möglichkeit zum Messen der Breite betrachten.

Wir könnten auch , dass im Format schreiben col-*also col-4wie folgt aus :

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

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

Aber was ist, wenn wir 7 Teile dem 1. col, 3 Teile dem 2. colund 2 Teile (12-7-3 = 2) dem 3. col(7 + 3 + 2, also insgesamt 12) geben möchten , können wir dies einfach tun:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

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

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

Wie sieht es in der Aktion aus?

Was ist, wenn die Summe von colmehr als 12 ist? Dann wird der colunter die untere Linie verschoben / angepasst. Ja, eine Zeile kann beliebig viele Spalten enthalten!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

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

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

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

Ich denke, dieses Bild ist ziemlich gut, um das Konzept besser zu verstehen!

Für weitere Informationen gehen Sie bitte unter den folgenden Link:

https://getbootstrap.com/docs/3.4/css/

Nun, es wird verwendet, um Bootstrap mitzuteilen, wie viele Spalten in einer Zeile platziert werden sollen, abhängig von der Bildschirmgröße.

col-xs-2

würde nur 2 Spalten in einer Reihe in einem extra kleinen (xs) Bildschirm anzeigen, genauso wie sm einen kleinen Bildschirm definiert, md (mittelgroß), lg (groß), aber gemäß Bootstrap kleinere erste Regel, wenn Sie erwähnen

xs-col-2 md-col-4

Dann werden in jeder Zeile 2 Spalten für Bildschirmgrößen von xs bis sm (enthalten) angezeigt und ändern sich, wenn die nächste Größe erreicht wird, dh für md bis lg (enthalten), um die Bildschirmgrößen besser zu verstehen. Versuchen Sie, sie in verschiedenen Bildschirmmodi in auszuführen Chrome Entwicklermodus (Strg + Umschalt + i) und probieren Sie verschiedene Pixel oder Geräte