Wie steuern Zahlen in Bootstrap-Grid-Klassen das Layout?

Das Rastersystem in Bootstrap verstehen

In Bootstrap ermöglicht das Rastersystem eine präzise Layoutsteuerung mithilfe von Klassen wie col-md-4, col-xs-1 und col-lg-2. Diese Klassen nutzen Zahlen, um die Rasterausrichtung, Verwendung und Darstellung zu bestimmen.

Wie die Zahlen die Rasterausrichtung bestimmen

Die Zahlen in diesen Klassennamen (1-12) bedeuten der Anteil der Breite eines Containers, den eine bestimmte Rasterspalte überspannt. Beispielsweise umfasst col-*-6 sechs der insgesamt 12 Spalten, col-*-12 die gesamte Breite (12 Spalten) und so weiter.

Nutzung der Zahlen

Um diese Zahlen effektiv zu nutzen, stellen Sie sich einen Behälter vor, der in 12 gleiche Spalten unterteilt ist. Durch die Zuweisung von Klassen mit bestimmten Nummern können Sie genau definieren, wie Spalten den Container belegen. Wenn Sie beispielsweise col-xs-6 zweimal in einem Container verwenden, werden zwei gleich große Spalten erstellt, die zusammen den gesamten Container ausfüllen.

Darstellung der Zahlen

Die Zahlen in den Klassennamen stellen die Anzahl der Spalten dar, die die Rasterelemente innerhalb ihrer jeweiligen Containergröße umfassen. Beispielsweise gibt col-xs-6 an, dass das Element auf besonders kleinen Bildschirmen (Telefonen) die halbe Containerbreite einnimmt.

Auswirkungen von Responsive Designs

Bootstrap bietet mehrere Spaltenklassen wie xs, sm, md und lg, um unterschiedliche Bildschirmgrößen zu berücksichtigen. Diese Klassenpräfixe bestimmen die Bildschirmgröße, bei der eine bestimmte Rasterkonfiguration wirksam wird. Durch die Kombination von Klassen mit unterschiedlichen Präfixen (z. B. col-xs-6 col-md-4) können Sie reaktionsfähige Layouts erstellen, die sich an das verwendete Gerät anpassen.

Unterstützung mehrerer Bildschirmgrößen

Wenn Sie einem Element mehrere Spaltenklassen zuweisen, gilt die angegebene Rasterkonfiguration für die entsprechende Bildschirmgröße und größer. Beispielsweise erstreckt sich col-xs-6 col-md-4 auf besonders kleinen und kleinen Bildschirmen über sechs Spalten und auf mittleren und großen Bildschirmen über vier Spalten, sofern dies nicht durch eine andere Deklaration überschrieben wird.

Hinweis: Wenn keine xs-Klasse angegeben ist, wird ein Element standardmäßig auf col-xs-12 gesetzt, was bedeutet, dass es sich über die gesamte Breite auf extra klein erstreckt Bildschirme.

Überlaufbehandlung

Beachten Sie, dass die Überschreitung von 12 Spalten in einem Container dazu führt, dass die überlaufenden Elemente in der nächsten Zeile angezeigt werden und nicht in der aktuellen Zeile umgebrochen werden .

Das obige ist der detaillierte Inhalt vonWie steuern Zahlen in Bootstrap-Grid-Klassen das Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!