it-swarm-eu.dev

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?

483
StreetCoder

Aktualisiert 2018 ...

Das Bootstrap 3 - Gitter wird in 4 Tiers (oder "Haltepunkten") angezeigt.

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

Mit diesen Rastergrößen können Sie das Gitterverhalten auf verschiedene Breiten einstellen. Die verschiedenen Ebenen werden durch CSS Medienabfragen gesteuert.

Also in Bootstraps 12-Spalten-Raster ...

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

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


Die kleinere Ebene (xs, sm oder md) definiert auch die Größe für größere Bildschirmbreiten. Legen Sie für die Spalte same size auf allen Ebenen die Breite für das kleinste Ansichtsfenster fest ...

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

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

Größere Stufen sind impliziert. Weil col-sm-33 units on sm-and-up bedeutet, sofern nicht ausdrücklich durch eine größere Schicht überschrieben, die eine andere Größe verwendet.

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


Kombinieren die Klassen für die Änderung der Spaltenbreite bei verschiedenen Rastergrößen. Dadurch wird ein responsives Layout erstellt.

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

Die Raster sm, md und lg werden auf Bildschirmen/Ansichtsfenstern mit weniger als 768 Pixeln vertikal "gestapelt". An diesem Punkt passt das xs-Gitter hinein. Spalten, die die col-xs-*-Klassen verwenden, werden nicht vertikal gestapelt und auf den kleinsten Bildschirmen weiter verkleinert.

Verändern Sie die Größe Ihres Browsers mit dieser Demo und Sie sehen die Rastereffekte.


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

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

Bootstrap 4 Grid Demo

Außerdem erklärt dieser Artikel mehr über das Bootstrap-Gitter

453
Zim

Das Bootstrap docs erklärt es zwar, aber es dauerte noch eine Weile, bis ich es bekam. Es ist sinnvoller, wenn ich es mir auf zwei Arten erkläre:

Wenn Sie an die Spalten denken, die horizontal beginnen, können Sie wählen, wann sie gestapelt werden sollen.

Wenn Sie beispielsweise mit Spalten beginnen: A B C

Sie entscheiden, wann sie stapeln sollten, um so zu sein:

EIN

B

C

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

Wenn Sie sich für col-md entscheiden, werden die Spalten gestapelt, wenn die Breite <992px ist.

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

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

Wenn Sie dagegen an die gestapelten Säulen denken, können Sie wählen, an welchem ​​Punkt sie horizontal werden:

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

Wenn Sie sich für col-md entscheiden, werden die Spalten horizontal, wenn die Breite> = 992px ist.

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

222
ryanman

Aus Twitter Bootstrap-Dokumentation :

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

Ich denke, das Verwirrende daran ist die Tatsache, dass BootStrap 3 ein mobiles System ist, das schnell reagiert, und nicht erklären kann, wie sich dies auf die col-xx-n-Hierarchie in diesem Teil der Bootstrap-Dokumentation auswirkt. Sie fragen sich, was auf kleineren Geräten passiert, wenn Sie einen Wert für größere Geräte auswählen, und fragen Sie sich, ob Sie mehrere Werte angeben müssen. (Sie tun es nicht)

Ich würde versuchen, dies zu erklären, indem ich feststellte, dass ... Niedrigere Körpertypen (xs, sm) versuchen, das Layout auf kleineren Bildschirmen beizubehalten, und größere Typen (md, lg) werden nur auf größeren Bildschirmen korrekt angezeigt, Spalten jedoch umbrechen kleinere Geräte. Die in den vorherigen Beispielen genannten Werte beziehen sich auf den Schwellenwert, da der Bootstrap das Erscheinungsbild auf die verfügbare Bildschirmgröße reduziert.

Dies bedeutet in der Praxis, dass die Spalten col-xs-n 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 zeigen sollten, wie Sie sie entworfen haben, und nicht in einer herabgestuften Form (einzelne oder umbrochene Spaltenform). Natürlich hängt das 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 eine schreckliche Art und Weise umgebrochen, wenn Sie sie nicht berücksichtigen. Daher können Sie abhängig von den Daten in den Spalten den Punkt festlegen, an dem das Layout festgelegt ist, um den Inhalt angemessen anzuzeigen.

z.B. Wenn Ihre Seite drei col-sm-n-Spalten enthält, werden die Spalten von Bootstrap in Zeilen umbrochen, wenn die Seitenbreite unter 992px fällt. Dies bedeutet, dass die Daten noch sichtbar sind, jedoch ein vertikaler Bildlauf erforderlich ist, um sie anzuzeigen. Wenn Sie nicht möchten, dass sich Ihr Layout verschlechtert, wählen Sie xs (sofern Ihre Daten auf einem Gerät mit niedriger Auflösung in drei Spalten 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 zu erhalten. 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-Grenzwert von 1200px fällt.

24
David Bridge

Gerätegrößen und Klassenpräfix:

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

Rasteroptionen:

 Bootstarp Grid System

Referenz: Netzsystem

8
Ani Menon
.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 
5
Varun Jain

TL; DR

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

Bootstrap stellt ein Raster von 12 Spalten pro .row bereit. Y = 3 bedeutet Breite = 25%.

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

Beim Festlegen unterschiedlicher Breiten für verschiedene Bildschirmgrößen 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 Mobile, Tablet und Laptop.

3
Alex R

Ein besonderer Fall: Bevor Sie das Bootstrap-Grid-System erlernen, stellen Sie sicher, dass der Browser-Zoom auf 100% (100%) eingestellt ist. Beispiel: Wenn die Bildschirmauflösung (1600 x 900 Pixel) und der Browser-Zoom 175% beträgt, werden die "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 - horizontal platzierte Elemente

Chrome zoom 175%

Browser 175 Prozent - gestapelte Elemente

1
Ted

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

col-xs-2

würde nur 2 Spalten in einer Zeile in einem extra kleinen (xs) -Bildschirm anzeigen, genau wie sm einen kleinen Bildschirm definiert. wenn du sagst

xs-col-2 md-col-4

dann werden in jeder Zeile 2 Spalten für Bildschirmgrößen von xs bis sm (enthalten) angezeigt und geändert, wenn die nächste Größe angezeigt wird, dh für md bis lg (enthalten) Bildschirmmodi im Entwicklermodus von Chrome (Strg + Umschalttaste + i) und probieren Sie verschiedene Pixel oder Geräte aus 

0
Nemo Holmes