Bootstrap col-sm col-md Unterschied-Bootstrap-Tutorial-php.cn

Die Bedeutung von col-xs-*, col-sm-*, col-md-* im CSS des Bootstrap-Fence-Systems besteht darin, automatisch den entsprechenden Klassenstil entsprechend der Breite des Anzeigebildschirms auszuwählen:

Bootstrap col-sm col-md Unterschied

.col-xs- Mobiltelefon mit ultrakleinem Bildschirm (<768px)(empfohlenes Lernen:Bootstrap-Video-Tutorial)

.col-sm- Tablet mit kleinem Bildschirm (≥768 Pixel)

.col-md- Desktop-Monitor mit mittlerem Bildschirm (≥992 Pixel)

.col-lg- Großbild-Desktop-Monitor (≥1200 Pixel)

Erklären Sie zunächst:

1 ;

2. xs-maxsmall, klein; md-groß, groß; , automatisch belegendes 12-Spalten-Rastersystemverhältnis

4. *Tablet mit kleinem Bildschirm (≥768px),

.col-md-*Desktop-Monitor mit mittlerem Bildschirm (≥992px) (Rasterparameter).

5 Egal, wo es sich befindet: Auf diesem Bildschirm unterteilt das Rastersystem automatisch jede Zeile in col-xs-* und auf col-sm-* und col-md-* folgen Parameter, die die Anzahl der belegten Spalten angeben jedes Div im aktuellen Bildschirm.

Zum Beispiel

Die Position, die dieses Div auf dem Bildschirm einnimmt, ist: .col-xs-6 belegt 6 Spalten auf einem Ultra -kleiner Bildschirm Das ist die Hälfte des Bildschirms (12/6 Spalten = 2 Divs). .col-md-3 belegt 3 Spalten oder 1/4 (12/3 Spalten = 4 Divs) im Mittelspurbildschirm.

6. Wenn wir umgekehrt 3 Divs nebeneinander auf dem kleinen Bildschirm anzeigen möchten (12/3 = jedes belegt 4 Spalten), dann zeigen wir 6 auf dem großen Bildschirm an ( 12/6 = jede belegt 2 Spalten), dann können wir mit col-md-2; das gewünschte Layout steuern.

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte

Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonBootstrap col-sm col-md Unterschied. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!