Die Zahlen in Bootstrap-Grid-Klassen verstehen: col-md-4, col-xs-1, col-lg-2

Die Das Bootstrap-Framework führt ein robustes Rastersystem ein, das die Erstellung reaktionsf?higer Layouts erleichtert. Integraler Bestandteil dieses Systems sind Klassen mit dem Format col-*, wobei der Stern eine Zahl darstellt. Diese Zahlen spielen eine entscheidende Rolle bei der Bestimmung, wie Elemente innerhalb eines Rasters ausgerichtet sind und wie sie auf unterschiedliche Bildschirmgr??en reagieren.

Wie richten die Zahlen Raster aus?

Die Die Zahl in einer col-*-Klasse stellt den Teil der verfügbaren Breite dar, den das zugeh?rige Element einnehmen soll. Die Gesamtbreite einer Rasterzeile ist in 12 Spalten unterteilt, und die Zahl in der Klasse gibt die Anzahl der Spalten an, die das Element umfassen wird.

Spalte-4 bedeutet beispielsweise, dass das Element 4 Spalten umfassen wird oder 1/3 der verfügbaren Breite. Spalte 12 erstreckt sich über die gesamte Breite und nimmt alle 12 Spalten ein.

So verwenden Sie die Zahlen

Um diese Klassen zu verwenden, weisen Sie sie einfach Elementen innerhalb von a zu Rasterreihe. Um beispielsweise zwei Spalten gleicher Breite innerhalb einer Zeile zu erstellen, würden Sie Folgendes verwenden:

<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>

Um drei Spalten ungleicher Breite zu erstellen, k?nnten Sie Folgendes verwenden:

<div class="col-2">Column 1</div>
<div class="col-6">Column 2</div>
<div class="col-4">Column 3</div>

Was stellen die Zahlen dar?

über die Zahlen selbst hinaus ist es wichtig, die verwendeten Pr?fixe zu beachten ihnen. In Bootstrap stellen diese Pr?fixe unterschiedliche Bildschirmgr??en dar:

• xs: Extra klein (mobile Ger?te)
• sm: Klein (Tablets)
• md: Mittel (Desktops). )
• lg: Large (gr??ere Desktops)

Von Indem Sie einem Element mehrere col-*-Klassen zuweisen, k?nnen Sie steuern, wie es sich bei jeder dieser Bildschirmgr??en verh?lt. Beispielsweise bedeutet col-6 col-sm-4, dass das Element auf mobilen Bildschirmen die halbe Breite und auf Tablets und Desktops 1/3 der Breite einnimmt.

Fazit

Das Verst?ndnis der Zahlen und Pr?fixe in Bootstrap-Rasterklassen ist für die Erstellung reaktionsf?higer und anpassungsf?higer Weblayouts von entscheidender Bedeutung. Durch die effektive Nutzung der col-*-Klassen k?nnen Entwickler sicherstellen, dass ihre Designs nahtlos auf unterschiedliche Bildschirmgr??en reagieren und ein konsistentes Benutzererlebnis auf allen Ger?ten bieten.

Das obige ist der detaillierte Inhalt vonWie bestimmen die Zahlen in Bootstrap-Grid-Klassen wie col-md-4, col-xs-1 und col-lg-2 die Elementbreite und Reaktionsf?higkeit?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!