Warum werden meine Bootstrap-xs-Spalten umbrochen, anstatt sie unter 360 Pixel zu stapeln?

Bootstrap: xs Columns Unexpectedly Wrapping

Das Bootstrap-Framework vereinfacht responsives Design, indem es Dienstprogramme zum Erstellen flexibler und effizienter Layouts bereitstellt. Allerdings stoßen Benutzer manchmal auf unerwartete Probleme, wenn sich Spalten nicht wie erwartet verhalten, insbesondere in der extra kleinen Größe (xs).

Problem: xs-Spalten werden umbrochen statt gestapelt

Normalerweise, wenn eine Zeile Wenn die Anzahl der Spalten 12 beträgt, sollten sie vertikal gestapelt werden, wenn die Bildschirmbreite abnimmt. Auf kleineren Bildschirmen kann es jedoch passieren, dass eine Spalte unerwartet zum Anfang des Bildschirms statt zum Ende hin umgebrochen wird.

Ursache: Browser-Konflikt

Dieses Verhalten entsteht aufgrund eines bekannten Problems in Bootstrap. Bei Bildschirmbreiten von weniger als 360 Pixel passen Spalten mit einer Breite von 1 % (col-xs-1) möglicherweise nicht richtig in den Container. Trotz der Angabe einer Breite von 1 % wird die Spalte durch die 15-Pixel-Padding auf beiden Seiten effektiv breiter, was zu einer Nichtübereinstimmung mit der Layout-Engine des Browsers führt.

Lösung: Vermeiden Sie col-xs-1 für kleine Bildschirme

Um dieses Problem zu vermeiden, sollten Sie erwägen, col-xs-1 nicht auf Bildschirmen zu verwenden, die kleiner als 360 Pixel sind. Stellen Sie fest, ob Ihre Anwendung realistischerweise davon ausgeht, dass Benutzer die Bildschirmgröße unterhalb dieser Grenze ändern.

Hinweis für Bootstrap 4

In Bootstrap 4 wurde die Klasse col-xs-1 in col-1 umbenannt. Das oben beschriebene Problem gilt weiterhin für Spalte 1 in Bootstrap 4.

Das obige ist der detaillierte Inhalt vonWarum werden meine Bootstrap-xs-Spalten umbrochen, anstatt sie unter 360 Pixel zu stapeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!