當我在引導程式中縮小頁面時，我希望我的 4 列成為一列，如圖所示。
<div class="container-fluid ">
<div class="row my-row ">
<div class="col col-md-3 my-col">
<div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
column
</div>
<div class="col col-md-3 my-col">
<div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
column
</div>
<div class="col col-md-3 my-col">
<div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
column
</div>
<div class="col col-md-3 my-col">
<div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
<div><p>column</p></div>
</div>
</div>
</div>
任何人都可以幫我解決這個問題嗎？
uj5u.com熱心網友回復：
您的意思是“我如何正確使用回應式類，以便布局在寬度較窄的 1 列中，但在寬度較寬時為 4 列？” 在這種情況下，您將類更改為類似的內容col-12 col-lg-3（請記住，類中的數字顯示了元素應該使用多少個概念列，基于 Bootstrap 的標準 12 列網格）。
代碼最終看起來像這樣。我在md這里添加了一個額外的斷點，希望能幫助弄清楚它是如何作業的。
<div class="container-fluid">
<div class="row my-row">
<div class="col-12 col-md-6 col-lg-3 my-col">
STUFF
</div>
<div class="col-12 col-md-6 col-lg-3 my-col">
STUFF
</div>
<div class="col-12 col-md-6 col-lg-3 my-col">
STUFF
</div>
<div class="col-12 col-md-6 col-lg-3 my-col">
STUFF
</div>
</div>
</div>
本質上，在構建 Bootstrap 布局時，您需要考慮結構的斷點。從移動（最窄）布局的默認布局開始，并添加必要的默認col-*類（在這里，col-12因為您希望每個div列都使用所有 12 個名義列 - 即您希望每個列都是全角的）。然后考慮您希望布局更改的位置并col-xx-*為該斷點添加一個新類（此處，col-md-6在中等大小col-lg-3時轉到 2 列，在大尺寸時轉到 4 列）。Bootstrap 將使用col-12您指定的第一個斷點，然后使用該斷點向上的新寬度，對于每個斷點的大小順序也是如此。
uj5u.com熱心網友回復：
<div class="container-fluid ">
<div class="row my-row ">
<div class="col-3 col-md-3 my-col">
<div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
<p>column</p>
</div>
<div class="d-none d-sm-block col-md-3 d-sm-none d-md-block my-col">
<div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
column
</div>
<div class="d-none d-sm-block col-md-3 d-sm-none d-md-block my-col">
<div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
column
</div>
<div class="d-none d-sm-block col-md-3 d-sm-none d-md-block my-col">
<div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
<div><p>column</p></div>
</div>
</div>
這是如何完成的。感謝所有幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/324533.html