Warum werden Bootstrap-Spalten bei XS-Größe nicht richtig umbrochen?

Bootstrap Column Wrapping in der kleinsten Größe (XS)

Bootstrap, ein beliebtes Front-End-Framework, bietet ein reaktionsfähiges Rastersystem, mit dem Entwickler flexible Layouts erstellen können an unterschiedliche Bildschirmgrößen anpassen. Ein häufiges Problem bei der Verwendung des Haltepunkts mit der kleinsten Größe (XS) besteht jedoch darin, dass Spalten nicht wie erwartet umbrochen werden, wenn die Bildschirmbreite über einen bestimmten Grenzwert hinaus abnimmt.

Dieses Problem tritt auf, weil Spalten mit einer Gesamtbreite von 12 (z. B.

< div class="col-xs-1">

) wird aufgrund der minimalen Auffüllung in jeder Spalte möglicherweise nicht richtig umbrochen. Die .col-xs-1-Spalten von Bootstrap haben einen Abstand von 15 Pixeln, was dazu führen kann, dass sie auf schmalen Bildschirmen vorzeitig umbrochen werden.

Bekanntes Problem:

Dieses Problem wurde bestätigt im Bootstrap-GitHub-Repository: https://github.com/twbs/bootstrap/issues/13221.

Lösung:

Um dieses Problem zu vermeiden, beachten Sie Folgendes Vorschläge:

• Verwenden Sie auf sehr kleinen Bildschirmen keine .col-xs-1-Spalten:Verwenden Sie stattdessen größere Spalten wie .col-xs-2 oder .col-xs -3.
• Berücksichtigen Sie die Bildschirmgröße: Stellen Sie fest, ob die Bildschirmgröße realistischerweise auf unter 360 Pixel geändert werden soll. In den meisten Fällen ist dies unwahrscheinlich.

Hinweis für Bootstrap 4:

In Bootstrap 4 wurde .col-xs-1 in .col-xs-1 umbenannt. Spalte 1. Das gleiche Problem kann bei .col-1-Spalten auf Bildschirmen mit einer Breite von weniger als 360 Pixel auftreten.

Verwandtes Problem:

Bootstrap-Benutzer haben auch ein ähnliches Problem mit dem Raster gemeldet Brechen bei kleinster Größe: https://stackoverflow.com/questions/29385993/bootstrap-grid-breaks-in-smallest-size

Das obige ist der detaillierte Inhalt vonWarum werden Bootstrap-Spalten bei XS-Größe nicht richtig umbrochen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!