我已經使用引導程式在桌面視圖中添加了 4 列，但我不明白如何在回應式視圖中設定這 4 列。
uj5u.com熱心網友回復：
Bootstrap 有各種與螢屏尺寸相關的類。你可以試試
4 個桌面，2 個 Ipad/tab 和 1 個移動視圖。
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12">info here</div>
<div class="col-lg-3 col-md-6 col-xs-12">info here</div>
<div class="col-lg-3 col-md-6 col-xs-12">info here</div>
<div class="col-lg-3 col-md-6 col-xs-12">info here</div>
</div>
uj5u.com熱心網友回復：
嘗試一下：
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
uj5u.com熱心網友回復：
首先，您需要閱讀Bootstrap的官方檔案。因此，您可以輕松學習和使用預定義classes的 Bootstrap。
有用的鏈接：
https ://getbootstrap.com/docs/5.1/layout/grid/#how-it-works
https://getbootstrap.com/docs/5.1/layout/grid/#row-columns
https://getbootstrap .com/docs/5.1/layout/gutters/#horizo??ntal--vertical-gutters
.l {
box-shadow: 0 0 0 1px #ccc;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<h5 class="mt-4 text-primary">With Columns Break</h5>
<div class="container py-3">
<div class="row row-cols-1 rows-cols-sm-2 row-cols-md-4 g-4">
<div class="col l">1</div>
<div class="col l">2</div>
<div class="col l">3</div>
<div class="col l">4</div>
</div>
</div>
<h5 class="mt-4 text-primary">Without Columns Break</h5>
<div class="container py-3">
<div class="row g-4">
<div class="col l">1</div>
<div class="col l">2</div>
<div class="col l">3</div>
<div class="col l">4</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478806.html
下一篇：無法對齊垂直元素