我正在創建一個網站，我是網頁設計的初學者，我想創建一個類別設計，在桌面上顯示 4 張卡片，在移動視圖中顯示 2 張卡片。
我的代碼如下
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<div class="categories-main">
<div class="container bg-light rounded">
<br>
<div class="h4 font-weight-bold text-center py-2">Categories</div>
<br>
<div class="row">
<div class="col-lg-3 col-md-6 my-lg-2 my-2">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> <img src="#" alt=""> </div>
<div class="d-flex flex-column"> <b>Public Speech</b>
<a href="#">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br> Categories
<br>我嘗試了很多改變，但沒有得到我想要的。我希望開發人員在這方面提供幫助。
uj5u.com熱心網友回復：
參考 bootstrap檔案，最大列數為 12。因此您需要為移動設備制作 col-6 col-6（將制作 2 列（12/2 = 6））和桌面 col-3 col-3 col-3 col -3（將生成 4 列 (12/4 = 3)）。
請參閱下面的簡化示例：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<div class="row">
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-red">
1
</div>
</div>
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-blue">
2
</div>
</div>
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-green">
3
</div>
</div>
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-black">
4
</div>
</div>
</div>uj5u.com熱心網友回復：
默認情況下有 12 列。
你可以這樣寫<div >
12/3 = 4 in a row when screen is xl
12/4 = 3 in a row when screen is lg
12/6 = 2 in a row when screen is md
12/12= 1 in a row when screen is sm
您可以根據需要根據設備自定義列。:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534725.html
標籤：网页格式CSS引导程序 4
下一篇：默認情況下洗掉重要的背景影像