Gilt nur für Bootstrap 3.
Das Ignorieren der Buchstaben (x s , sm , md , lg ) für jetzt , werde ich nur mit den Zahlen beginnen ...
- Die Zahlen (1-12) repräsentieren einen Teil der Gesamtbreite eines Div
- Alle Divs sind in 12 Spalten unterteilt
- so,
col-*-6Spannweiten 6 von 12 Spalten ( die Hälfte der Breite), col-*-12Spannweiten 12 der 12 Spalten (die gesamte Breite), usw.
Wenn Sie also möchten, dass zwei gleiche Spalten ein Div umfassen, schreiben Sie
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Wenn Sie möchten, dass drei ungleiche Spalten dieselbe Breite haben, können Sie Folgendes schreiben:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
Sie werden feststellen, dass sich die Anzahl der Spalten immer zu 12 summiert. Sie kann weniger als zwölf betragen. Achten Sie jedoch darauf, wenn mehr als 12 vorhanden sind, da Ihre beleidigenden Divs in die nächste Zeile gelangen (nicht .row, was insgesamt eine andere Geschichte ist).
Sie können Spalten auch in Spalten verschachteln (am besten mit einem .rowWrapper):
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">Column 1-a</div>
<div class="col-xs-8">Column 1-b</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">Column 2-a</div>
<div class="col-xs-10">Column 2-b</div>
</div>
</div>
Jeder Satz verschachtelter Divs umfasst auch bis zu 12 Spalten des übergeordneten Divs. HINWEIS: Da jede .colKlasse auf beiden Seiten einen 15-Pixel- Abstand hat, sollten Sie verschachtelte Spalten normalerweise in einen .rowmit -15-Pixel-Rand einschließen. Dies vermeidet das Duplizieren des Auffüllens und hält den Inhalt zwischen verschachtelten und nicht verschachtelten Spaltenklassen aufgereiht.
- Sie haben nicht speziell nach der xs, sm, md, lgVerwendung gefragt , aber sie gehen Hand in Hand, sodass ich nicht anders kann, als sie zu berühren ...
Kurz gesagt, sie werden verwendet, um zu definieren, bei welcher Bildschirmgröße diese Klasse angewendet werden soll:
- xs = extra kleine Bildschirme (Handys)
- sm = kleine Bildschirme (Tabletten)
- md = mittlere Bildschirme (einige Desktops)
- lg = große Bildschirme (verbleibende Desktops)
Weitere Informationen finden Sie im Kapitel " Rasteroptionen " in der offiziellen Bootstrap-Dokumentation.
Normalerweise sollten Sie ein div anhand mehrerer Spaltenklassen klassifizieren, damit es sich je nach Bildschirmgröße unterschiedlich verhält (dies ist das Herzstück dessen, was Bootstrap reaktionsfähig macht). zB: ein div mit Klassen col-xs-6und col-sm-4wird auf dem Mobiltelefon (xs) und 1/3 des Bildschirms auf Tabletten (sm) die Hälfte des Bildschirms erstrecken.
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
HINWEIS: Gemäß dem folgenden Kommentar gelten Rasterklassen für eine bestimmte Bildschirmgröße für diese Bildschirmgröße und größer, es sei denn, eine andere Deklaration überschreibt sie (dh col-xs-6 col-md-4umfasst 6 Spalten auf xs undsm und 4 Spalten auf md undlg , obwohl smund lgwurde nie explizit deklariert).
HINWEIS: wenn Sie nicht definieren xs, wird es auf die Standard col-xs-12(dh col-sm-6die Hälfte der Breite auf sm, mdund lgBildschirmen, aber voller Breite auf xsBildschirmen).
HINWEIS: Es ist eigentlich völlig in Ordnung, wenn Sie .rowmehr als 12 Spalten enthalten, solange Sie wissen, wie diese reagieren werden. - Dies ist ein umstrittenes Thema, und nicht jeder stimmt zu.
