Heim > Artikel > Web-Frontend > Warum werden Bootstrap-Spalten bei XS-Größe nicht richtig umbrochen?

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

Linda HamiltonOriginal: 2024-10-31 04:45:30954Durchsuche

Why Do Bootstrap Columns Not Wrap Correctly at XS Size?

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!

bootstrap less if for using class this padding column github https issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie erreicht man eine responsive Spaltenreihenfolge in Bootstrap 3 mithilfe von Push- und Pull-Klassen?Nächster Artikel：Wie erreicht man eine responsive Spaltenreihenfolge in Bootstrap 3 mithilfe von Push- und Pull-Klassen?

In Verbindung stehende Artikel

Mehr sehen