首頁 > web前端 > css教學 > 如何防止 Bootstrap 網格列與固定包裝器堆疊?

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

Barbara Streisand
發布: 2024-11-01 16:30:37
原創
298 人瀏覽過

How to Prevent Bootstrap Grid Columns from Stacking with a Fixed Wrapper?

使用固定包裝器的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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板