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

TL;DR

.col-X-Y bedeutet für Bildschirmgröße X und größer, dieses Element auf Y Spalten strecken.

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

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

Der Grund für die Angabe unterschiedlicher Breiten auf verschiedenen Bildschirmgrößen ist, dass Sie Dinge auf kleineren Bildschirmen vergrößern können.

Beispiel

Bedeutung: 50% Breite auf Desktops, 100% Breite auf Mobilgeräten, Tablet und Laptop.

Answer 2

Gerätegrößen und Klassenpräfixe:

• 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-

Rastereinstellungen:

Referenz: Rastersystem

Answer 3

.col-xs-$    Extra klein    Telefone unter 768px 
.col-sm-$    Kleine Geräte    Tablets 768px und höher 
.col-md-$    Mittlere Geräte    Desktops 992px und höher 
.col-lg-$    Große Geräte    Große Desktops 1200px und höher

Answer 4

Ein spezieller Fall: Bevor Sie das Bootstrap-Raster kennenlernen, stellen Sie sicher, dass die Browser-Zoomstufe auf 100% (hundert Prozent) eingestellt ist. Zum Beispiel: Wenn die Bildschirmauflösung (1600px x 900px) beträgt und der Browser-Zoom bei 175% liegt, werden die "bootstrap-ped" Elemente gestapelt.

HTML

        class="col-lg-4"
        class="col-lg-4"

Chrome-Zoom 100%

Browser 100 Prozent - Elemente horizontal platziert

Chrome-Zoom 175%

Browser 175 Prozent - gestapelte Elemente

Answer 5

Nun wird angegeben, wie viele Spalten Bootstrap je nach Bildschirmgröße in einer Zeile platzieren soll.

col-xs-2

zeigt nur 2 Spalten in einer Zeile auf einem extra kleinen (xs) Bildschirm an. Genauso definiert sm einen kleinen Bildschirm, md (mittelgroß) und lg (groß), aber gemäß der Bootstrap-Regel "kleiner zuerst" werden bei

xs-col-2 md-col-4

würden 2 Spalten in jeder Zeile für Bildschirmgrößen von xs bis einschließlich sm angezeigt und ändern sich, wenn der nächste größer wird, d.h. für md bis lg (einschließlich) Zur besseren Verständnis der Bildschirmgrößen sollten Sie diese in verschiedenen Bildschirmmodi im Entwicklermodus von Chrome (Strg+Umschalt+i) ausführen und verschiedene Pixel oder Geräte ausprobieren.