Wie funktionieren „col-md-4“, „col-xs-1“ und „col-lg-2“ im Bootstrap Grid System?

Gittersystem in Bootstrap: „col-md-4“, „col-xs-1“ und „col-lg-2“ verstehen

Mit dem Bootstrap-Rastersystem können Sie das Layout und die Ausrichtung von Elementen in verschiedenen Bildschirmgrößen steuern. Die „col-“-Klassen spielen in Verbindung mit Zahlen eine entscheidende Rolle in diesem System.

Wie die Zahlen Gitter ausrichten

Die Zahlen im „col-*“ „Klassen stellen die Breite einer Spalte im Verhältnis zur Gesamtbreite eines Containers dar. Jeder Container bietet Platz für insgesamt 12 Säulen. Daher würde „col-md-6“ 6 von 12 Spalten beanspruchen, was zu einer Spalte führen würde, die halb so breit wie der Container ist.

Verwendung der Zahlen

Um diese Zahlen zu verwenden, fügen Sie einfach die entsprechende „col-“-Klasse gefolgt von der Zahl ein. Beispielsweise würde ein Div mit der Klasse „col-xs-3“ auf besonders kleinen Bildschirmen (z. B. Mobiltelefonen) 3 Spalten belegen, während ein Div mit der Klasse „col-sm-6“ auf kleinen Bildschirmen 6 Spalten belegen würde Bildschirme (d. h. Tablets).

Was sie darstellen

Die Zahlen in „col-*“ stellen die in Bootstrap definierten reaktionsfähigen Haltepunkte dar. Die Buchstaben xs, sm, md und lg entsprechen:

• xs: Extra klein (Mobiltelefone)
• sm: Klein (Tablets)
• md: Mittel (einige Desktops)
• lg: Groß (verbleibende Desktops)

Durch die Verwendung mehrerer „col-“-Klassen für ein Element können Sie angeben, wie es sich bei verschiedenen Bildschirmgrößen verhalten soll . Der folgende Code würde beispielsweise eine Spalte erstellen, die auf Mobiltelefonen die halbe Breite, auf Tablets jedoch nur ein Drittel der Breite einnimmt:

<div>

Wenn Sie die „col-*“-Klassen verstehen, können Sie dies tun Erstellen Sie flexible und reaktionsfähige Layouts in Bootstrap. Durch die Steuerung der Anzahl und Größe der Spalten können Sie eine optimale Benutzererfahrung auf verschiedenen Geräten erzielen.

Das obige ist der detaillierte Inhalt vonWie funktionieren „col-md-4“, „col-xs-1“ und „col-lg-2“ im Bootstrap Grid System?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!