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

439

Ich bin verwirrt mit dem Grid-System im neuen Bootstrap, insbesondere diesen Klassen:

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

(wobei * eine Zahl darstellt).

Kann jemand bitte folgendes erklären:

  1. Wie richtet diese Zahl die Gitter aus?
  2. Wie benutzt man diese Nummern?
  3. Was repräsentieren sie eigentlich?
Bravo
quelle
13
Eine Erklärung finden Sie hier . Sie können die Nummer in der Spalte verwenden, wie Sie möchten, aber stellen Sie sicher, dass die Summe aller Spaltennummern in derselben Zeile gleich 12 sein muss
Doan Cuong

Antworten:

835

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.

Shawn Taylor
quelle
38
Es ist auch erwähnenswert, dass Rasterklassen für eine bestimmte Bildschirmgröße für Bildschirme dieser Größe und größer gelten , sofern sie nicht weiter überschrieben werden. Zum Beispiel .col-xs-2.col-sm-2.col-lg-7ist äquivalent zu. col-xs-2.col-lg-7
Cvrebert
5
Sie müssen Ihr Beispiel bezüglich der Verschachtelung korrigieren. Für das Verschachteln muss eine Zeile in die Spalte eingefügt werden, in der Sie die anderen Spalten verschachteln. Wenn Sie keine Zeile hinzufügen, werden Sie doppelt aufgefüllt. Zum besseren Verständnis siehe das Diagramm in meiner Antwort hier: stackoverflow.com/questions/23899715/…
jme11
1
sehr schöne Erklärung, danke. Ich liebe die etwas über die Verpackung .colsin .rowzu vermeiden und cacel die Polsterung. Ich habe mich immer gefragt, warum ich row verwenden soll und welchen Unterschied es macht.
Rishiraj Purohit
In der Dokumentation scheint die Gesamtbreite von divs jedoch mehr als 12 zu überschreiten, bis zu 18 für 'xs'. Bitte werfen Sie einen Blick auf den Abschnitt 'Gemischt: Mobil und Desktop' und warum so? getbootstrap.com/docs/3.3/examples/grid
Michel
@Michel es sieht so aus, als würdest du ihre Dokumentation falsch verstehen. Dort werden zwei separate xs-Optionen angezeigt - eine für 12 Spalten (volle Breite) und eine für 6 Spalten (halbe Breite). Sie werden sehen, dass diese Spalten auch lg-8 und lg-4 anzeigen - was sie Ihnen zeigen, ist, dass sie 8 und 4 Spalten (2/3 + 1/3 der Gesamtbreite) auf großen Displays und 12 überspannen und 6 (volle Breite + 1/2 der folgenden Reihe) auf Telefonanzeigen. Ich hoffe, das hilft!
Shawn Taylor
46

Das Bootstrap-Grid-System verfügt über vier Klassen:
xs (für Telefone)
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 wird vergrößert. 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 Spaltenmedium≥ 992px
col-xs- steht für Spalte extra klein≥ 768px

Die Pixelzahlen sind beispielsweise die Haltepunkte col-xs zielen auf das Element ab, wenn das Fenster kleiner als 768 Pixel ist (wahrscheinlich mobile Geräte) ...

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

Bootstrap Grid System, Spalte - * - 6

Alireza
quelle
col-xs-*wurden in Bootstrap 4 zugunsten voncol-*
Zohab Ali
Würden Sie bitte den HTML-Code (und möglicherweise CSS) teilen? Vielen Dank.
NoChance
11

Der Hauptpunkt ist folgender:

col-lg-* col-md-* col-xs-* col-sm Definieren Sie, wie viele Spalten in diesen verschiedenen Bildschirmgrößen vorhanden sein sollen.

Beispiel: Wenn auf Desktop-Bildschirmen und auf Telefonbildschirmen zwei Spalten vorhanden sein sollen, fügen Sie zwei col-md-6und zwei col-xs-6Klassen in Ihre Spalten ein.

Wenn Sie möchten, dass zwei Spalten in Desktop-Bildschirmen und nur eine Spalte in Telefonbildschirmen (dh zwei übereinander gestapelte Zeilen) two col-md-6und zwei col-xs-12in Ihre Spalten eingefügt werden und die Summe 24 beträgt, werden sie automatisch übereinander gestapelt andere, oder einfach xsStil weglassen.

Ton Škoda
quelle
6

Bitte schön

col-lg-2: Wenn der Bildschirm groß ist ( lg ), nimmt diese Komponente Platz von 2 ein Elemente ein, da die gesamte Zeile 12 Elemente aufnehmen kann (Sie werden also sehen, dass diese Komponente auf einem großen Bildschirm 16% Platz für eine Zeile einnimmt).

col-lg-6: Wenn der Bildschirm groß ist ( lg ), nimmt diese Komponente Platz von 6 ein Elemente ein, da die gesamte Zeile 12 Elemente aufnehmen kann. Wenn sie angewendet wird, sehen Sie, dass die Komponente die Hälfte des verfügbaren Platzes in der Zeile belegt hat.

Die obige Regel wird nur angewendet, wenn der Bildschirm groß ist. Wenn der Bildschirm klein ist, wird diese Regel verworfen und nur eine Komponente pro Zeile wird angezeigt.

Das folgende Bild zeigt verschiedene Bildschirmgrößenbreiten:

Definitionen der Bildschirmgröße

Dhananjay
quelle