Warum wird meine Bootstrap-XS-Spalte bei extrem kleinen Bildschirmgrößen falsch umgebrochen?

Behebung des Bootstrap-XS-Spaltenumbruchproblems

Im Rastersystem von Bootstrap kann ein Problem auftreten, bei dem die letzte XS-Spalte nicht ordnungsgemäß umbrochen wird, wenn die Bildschirmbreite außergewöhnlich klein wird. Trotz der Konfiguration der Spalten auf insgesamt 12 entspricht das Ausrichtungsverhalten möglicherweise nicht den Erwartungen.

Bedenken Sie beispielsweise den folgenden Code:

<code class="html"><div class="container">
    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-1 col-xs-offset-8"></div>
        <div class="col-xs-1"></div>
    </div>
</div></code>

Normalerweise wird beim Reduzieren der Bildschirmgröße die Die letzte Spalte sollte vertikal am Ende des Bildschirms gestapelt sein. Wenn der Bildschirm jedoch einen kritischen Schwellenwert überschreitet, wird die Spalte unerwartet am Anfang umbrochen.

Einige Benutzer haben darüber nachgedacht, CSS-Code hinzuzufügen, um eine Mindestbreite für den Container anzugeben. Es gibt jedoch eine alternative Lösung innerhalb von Bootstrap.

Erläuterung des Problems

Dieses Verhalten ist auf ein bekanntes Problem zurückzuführen, das in GitHub dokumentiert ist (https://github.com/twbs). /bootstrap/issues/13221). Bei Bildschirmbreiten, die schmaler als 360 Pixel sind, beginnen .col-xs-1-Spalten umzubrechen, da die Breite der Spalte auf 8,333333 % eingestellt ist, während der Abstand auf beiden Seiten 15 Pixel beträgt. Diese Asymmetrie führt zu einer Diskrepanz, die dazu führt, dass der Browser die Spalten stapelt.

Das Problem vermeiden

Um den Umbruch zu verhindern, verzichten Sie auf die Verwendung von .col-xs-1 extrem kleine Bildschirme. Bewerten Sie außerdem, ob die Bildschirmgröße realistischerweise auf unter 360 Pixel verkleinert werden kann. In den meisten Szenarien kommt dies nicht häufig vor.

Hinweis: In Bootstrap 4 wurde .col-xs-1 durch .col-1 ersetzt.

Verwandte Probleme:

• [Bootstrap-Raster bricht in kleinster Größe](https://stackoverflow.com/questions/21023320/twitter-bootstrap-3-grid-breaks-in -kleinste Größe)

Das obige ist der detaillierte Inhalt vonWarum wird meine Bootstrap-XS-Spalte bei extrem kleinen Bildschirmgrößen falsch umgebrochen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!