如何防止 Bootstrap 網格列與固定包裝器堆疊？

使用固定包裝器的Bootstrap 網格的非堆疊列類

當使用固定包裝器的Bootstrap 網格系統時，可以防止列垂直堆疊瀏覽器大小已調整。

要實現此目的，請使用專為小螢幕設計的 非堆疊 col-xs-* 類別。這些類別會覆寫預設的回應行為，並確保列在固定包裝器內保持並排狀態。

<code class="html"><div class="container">
  <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>

示範： http://bootply.com/80085

Bootstrap 4 注意事項：

Bootstrap 4 注意事項：

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

在ootstrap 4：在ootstrap 4 下>在Bootstrap 4 中，非堆疊列不再需要xs 前綴。只需使用 col-* 類別即可達到預期效果。

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