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

The 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 sollte. 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.

Zum Beispiel bedeutet Spalte 4, 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:

Column 1
Column 2

Um drei Spalten ungleicher Breite zu erstellen, können Sie Folgendes verwenden:

Column 1
Column 2
Column 3

Was stellen die Zahlen dar?

Über die Zahlen selbst hinaus ist es wichtig, Folgendes zu beachten auf sie angewendete Präfixe. In Bootstrap stellen diese Präfixe unterschiedliche Bildschirmgrößen dar:

• xs: Extra klein (mobile Geräte)
• sm: Klein (Tablets)
• md: Mittel (Desktops). )
• lg: Groß (größere Desktops)

Durch Zuweisen mehrerer col-*-Klassen zu einem Element 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 unerlässlich. 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.