下面的代碼有 6div個塊。
6 塊應該在大螢屏中水平對齊
3 個塊應該在移動螢屏中水平對齊（3 個 div 塊 *2 行）
<div class="container">
<div class="row">
<div class="col-sm-2">
1
</div>
<div class=" col-sm-2">
2
</div>
<div class=" col-sm-2">
3
</div>
<div class=" col-sm-2">
4
</div>
<div class=" col-sm-2">
5
</div>
<div class=" col-sm-2">
6
</div>
</div>
</div>
基本 bootstrap5 模板中的上述代碼塊。但是我沒有得到想要的結果，而是所有div元素都在移動螢屏的列中堆疊
uj5u.com熱心網友回復：
班級應該是 "col-4 col-lg-2"
對于移動螢屏，螢屏寬度是<576px為 col 類將"col-*"和 fr 大螢屏其"col-lg-*"
參考引導網格系統
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row">
<div class="col-4 col-lg-2">1</div>
<div class="col-4 col-lg-2">2</div>
<div class="col-4 col-lg-2">3</div>
<div class="col-4 col-lg-2">4</div>
<div class="col-4 col-lg-2">5</div>
<div class="col-4 col-lg-2">6</div>
</div>
</div>uj5u.com熱心網友回復：
發生這種情況是因為您只定義了從small屬性（smin col-sm-2mean small）和 bootstrap 4開始的列會發生什么：col-smmeans >=576px，請參閱此鏈接
所以你需要做的是洗掉smfrom col-sm-2，如果你需要改變你的列以獲得更大的寬度，那么你可以像這樣設定它們的值：
<div class="container">
<div class="row">
<div class="col-4 col-lg-2">
1
</div>
<div class="col-4 col-lg-2">
2
</div>
<div class="col-4 col-lg-2">
3
</div>
<div class="col-4 col-lg-2">
4
</div>
<div class="col-4 col-lg-2">
5
</div>
<div class="col-4 col-lg-2">
6
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400163.html
標籤：推特引导