為什麼我的 Bootstrap XS 列在極小的螢幕尺寸下無法正確換行？

修復Bootstrap XS 列換行問題

當螢幕寬度變得異常小時，Bootstrap 的網格系統可能會遇到最後一個XS 大小的列換行不正確的問題。儘管將列配置為最多 12 列，但對齊行為可能不符合預期。

例如，考慮以下程式碼：

<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>

通常，在縮小螢幕尺寸時，最後一列應垂直堆疊在螢幕末端。然而，當螢幕縮小到超過臨界閾值時，該列會意外地向開頭換行。

有些使用者已考慮加入 CSS 程式碼來指定容器的最小寬度。但是，Bootstrap 中存在替代解決方案。

問題說明

此行為源自於 GitHub 中所記錄的已知問題 (https://github.com/twbs) /bootstrap/issues/13221）。當螢幕寬度小於 360 像素時，.col-xs-1 列開始換行，因為該列的寬度設定為 8.333333%，而兩側的填充量為 15 像素。這種不對稱會導致差異，導致瀏覽器堆疊列。

避免問題

要防止換行，請避免在上使用 .col-xs-1非常小的螢幕。此外，評估螢幕大小是否可能實際調整到 360 像素以下。在大多數情況下，這種情況不會經常發生。

注意：在 Bootstrap 4 中，.col-xs-1 已替換為 .col-1。

相關問題：

• [Bootstrap 網格中斷最小尺寸](https://stackoverflow.com/questions/21023320/twitter-bootstrap-3 -grid-breaks-in-smallest-size)

以上是為什麼我的 Bootstrap XS 列在極小的螢幕尺寸下無法正確換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！