如何防止 Bootstrap 網格列堆疊在固定寬度容器中？

Bootstrap 網格系統：使用固定包裝器克服列堆疊

Bootstrap 的網格系統是網頁設計中用於建立響應式佈局的基本組件。但是，當使用固定寬度容器時，網格內的列可以在較小的瀏覽器尺寸下垂直堆疊。

問題：

使用固定寬度包裝器時在Bootstrap 3 中，當調整瀏覽器視窗大小時，即使包裝器本身保持相同大小，網格列也會折疊並堆疊在一起。

解決方案：使用非堆疊類別

為了防止列在固定寬度容器中堆疊，Bootstrap 提供了一組「非堆疊」類別。這些類別使用媒體查詢來覆蓋特定螢幕解析度下的預設堆疊行為。

在 Bootstrap 3 中，非堆疊類別以 col-xs- 為前綴。這些類別可以應用於列，以防止它們在較小的螢幕尺寸下折疊。

範例：

<code class="html"><div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
  </div>
</div></code>

在此範例中，列將保持在側面 -即使在最小的螢幕尺寸下也是如此。

Bootstrap 4 更新：

在 Bootstrap 4 中，非堆疊類別的概念已被簡化。不再需要 xs 前綴。相反，預設行為是防止列堆疊。為了確保列保持並排，只需使用標準 col 類別（例如 col-4）。

以上是如何防止 Bootstrap 網格列堆疊在固定寬度容器中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！