Bedeutung der Zahlen in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

Question

Ich bin verwirrt vom Rastersystem im neuen Bootstrap, insbesondere von diesen Klassen:

col-lg-*
col-md-*
col-xs-*

(wo * eine Zahl darstellt).

Kann bitte jemand folgendes erklären:

1. Wie diese Zahl die Raster ausrichtet?
2. Wie man diese Zahlen verwendet?
3. Was sie tatsächlich repräsentieren?

Answer 1

Gilt nur für Bootstrap 3.

Wenn wir die Buchstaben (xs, sm, md, lg) vorerst ignorieren, beginne ich einfach mit den Zahlen...

• die Zahlen (1-12) repräsentieren einen Teil der Gesamtbreite eines div-Elements
• alle div-Elemente sind in 12 Spalten unterteilt
• also, col-*-6 erstreckt sich über 6 von 12 Spalten (die Hälfte der Breite), col-*-12 erstreckt sich über 12 von 12 Spalten (die gesamte Breite), usw.

Also, wenn du zwei gleich große Spalten in einem div haben möchtest, schreibe

Spalte 1
Spalte 2

Oder, wenn du drei ungleiche Spalten mit derselben Breite haben möchtest, könntest du folgendes schreiben:

Spalte 1
Spalte 2
Spalte 3

Du wirst bemerken, dass die Anzahl der Spalten immer zu 12 addiert. Es können weniger als zwölf sein, aber Vorsicht, wenn es mehr als 12 sind, da sich deine betreffenden div-Elemente in die nächste Zeile verschieben (nicht .row, was eine andere Geschichte ist).

Du kannst auch Spalten in Spalten verschachteln (am besten mit einem .row Wrapper um sie herum), wie zum Beispiel:

    Spalte 1-a
    Spalte 1-b

    Spalte 2-a
    Spalte 2-b

Jede Gruppierung von verschachtelten div-Elementen erstreckt sich ebenfalls über 12 Spalten des übergeordneten div-Elements. HINWEIS: Da jede .col Klasse 15px Polsterung an beiden Seiten hat, solltest du verschachtelte Spalten in der Regel in eine .row einwickeln, die -15px Ränder hat. Dies vermeidet die Duplizierung der Polsterung und hält den Inhalt zwischen verschachtelten und nicht-verschachtelten col-Klassen ausgerichtet.

-- Du hast nicht explizit nach der Verwendung von xs, sm, md, lg gefragt, aber sie gehen Hand in Hand, daher komme ich nicht umhin, darauf einzugehen...

Kurz gesagt, sie werden verwendet, um zu definieren, bei welcher Bildschirmgröße diese Klasse angewendet werden soll:

• xs = extra kleine Bildschirme (Mobiltelefone)
• sm = kleine Bildschirme (Tablets)
• md = mittlere Bildschirme (einige Desktops)
• lg = große Bildschirme (übrige Desktops)

Lies das "Grid-Optionen" Kapitel aus der offiziellen Bootstrap-Dokumentation für weitere Details.

Du solltest ein div in der Regel mit mehreren Spaltenklassen klassifizieren, damit es sich je nach Bildschirmgröße unterschiedlich verhält (das ist das Herzstück dessen, was Bootstrap responsiv macht). z.B.: ein div mit Klassen col-xs-6 und col-sm-4 wird die Hälfte des Bildschirms auf dem Mobiltelefon (xs) und ein Drittel des Bildschirms auf Tablets (sm) einnehmen.

Spalte 1 
Spalte 2 

HINWEIS: wie im Kommentar unten erwähnt, gelten Rasterklassen für eine bestimmte Bildschirmgröße für diese Bildschirmgröße und größer, es sei denn, eine andere Deklaration hebt sie auf (d.h. col-xs-6 col-md-4 erstreckt sich über 6 Spalten auf xs und sm, und 4 Spalten auf md und lg, obwohl sm und lg nie explizit deklariert wurden)

HINWEIS: wenn du xs nicht definierst, wird es standardmäßig zu col-xs-12 (d.h. col-sm-6 ist halbe Breite auf sm, md und lg Bildschirmen, aber Vollbreite auf xs Bildschirmen).

HINWEIS: es ist tatsächlich völlig in Ordnung, wenn deine .row mehr als 12 Spalten enthält, solange du dir darüber im Klaren bist, wie sie reagieren werden. --Dies ist ein umstrittenes Thema, und nicht jeder stimmt zu.

Answer 2

Das Bootstrap-Rastersystem verfügt über vier Klassen:
xs (für Handys)
sm (für Tablets)
md (für Desktops)
lg (für größere Desktops)

Die oben genannten Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.

Tipp: Jede Klasse skaliert nach oben. Wenn Sie also die gleichen Breiten für xs und sm festlegen möchten, müssen Sie nur xs angeben.

OK, die Antwort ist einfach, aber lesen Sie weiter:

col-lg- steht für Spalte groß 1200px
col-md- steht für Spalte mittel 992px
col-xs- steht für Spalte extra klein 768px

Die Pixelzahlen sind die Breakpoints, daher richtet sich col-xs beispielsweise auf das Element aus, wenn das Fenster kleiner als 768px ist (wahrscheinlich Mobilgeräte)...

Ich habe auch das folgende Bild erstellt, um zu zeigen, wie das Rastersystem funktioniert. In diesen Beispielen verwende ich sie mit 3, wie col-lg-6, um Ihnen zu zeigen, wie das Rastersystem auf der Seite funktioniert. Beachten Sie, wie lg, md und xs auf die Fenstergröße reagieren:

Answer 3

Der Hauptpunkt ist folgender:

col-lg-* col-md-* col-xs-* col-sm definieren, wie viele Spalten es in diesen verschiedenen Bildschirmgrößen geben wird.

Beispiel: Wenn Sie möchten, dass es zwei Spalten auf Desktop-Bildschirmen und auf Telefon-Bildschirmen gibt, fügen Sie Ihren Spalten zwei Klassen col-md-6 und zwei Klassen col-xs-6 hinzu.

Wenn Sie möchten, dass es zwei Spalten auf Desktop-Bildschirmen und nur eine Spalte auf Telefon-Bildschirmen gibt (also zwei Reihen übereinander gestapelt sind), fügen Sie zwei Klassen col-md-6 und zwei Klassen col-xs-12 hinzu und da die Summe 24 beträgt, werden sie automatisch übereinandergestapelt, oder lassen Sie einfach den xs Stil weg.

Answer 4

Von Twitter Bootstrap-Dokumentation:

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

Mehr lesen...

Answer 5

Hier gehen Sie

col-lg-2: Wenn der Bildschirm groß ist (lg), nimmt dieses Element Platz von 2 Elementen ein, da eine gesamte Zeile 12 Elemente aufnehmen kann (auf einem großen Bildschirm nimmt dieses Element also 16% des Platzes in einer Zeile ein).

col-lg-6: Wenn der Bildschirm groß ist (lg), nimmt dieses Element Platz von 6 Elementen ein, da eine gesamte Zeile 12 Elemente aufnehmen kann - wenn angewendet, sehen Sie dass das Element die Hälfte des verfügbaren Platzes in der Zeile eingenommen hat.

Die oben genannte Regel gilt nur, wenn der Bildschirm groß ist. Wenn der Bildschirm klein ist, wird diese Regel verworfen und es wird nur ein Element pro Zeile angezeigt.

Das folgende Bild zeigt verschiedene Bildschirmbreiten: