我已經為此搜索了很長時間，但不幸的是，所有問題/答案大多是 6/8 歲。現在 Bootstrap 已經發展了這么多，我想問這個問題，因為也許有人知道如何做到這一點。
我的要求是有一個基于視口適應的卡片輪播，例如：
- 默認尺寸：3 件
- 手機尺寸：僅 1 件
這個片段非常適合我的需求：https : //gosnippets.com/snippets/bootstrap-carousel-with-cards-in-3-columns，但是我無法實作我想要的。
我也玩過Slick carousel，但坦率地說，我不是粉絲。它完全符合我的需要，但它已經過時，有問題，我會更樂意使用引導程式。
我的專案使用 Webpack，因此如果有幫助，我可以使用 SCSS。
請讓我知道是否可以通過簡單的 Bootstrap 5 來實作我想要的。
uj5u.com熱心網友回復：
您可以通過呼叫兩個輪播在普通引導程式中做到這一點。這是以下代碼，希望您能理解代碼模式。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner d-none d-sm-block"> //d-none: display none for all devices, d-sm-block: hide on screens smaller than sm (width < 768px)
//loops start
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-sm">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="col-sm">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="col-sm">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
//loops end
</div>
<div class="carousel-inner d-sm-none">//d-sm-none: hide on sm (width < 768px) and wider screens
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
祝你好運。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/368864.html
標籤：html css 推特引导 bootstrap-5
上一篇：Bootstrap5.1.3Dropdowndata-bs-boundary不再有效
下一篇：如何對多個整數使用驗證模式？