如何cards在card-group較小的螢屏上保持彼此相鄰？
它們連接在較大的螢屏上，但在較小的螢屏上分開。我將額外的卡片隱藏在較小的螢屏上，并且更喜歡使用附加的第一張卡片。
使用此代碼cards在 575px 下分開。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="card-group">
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card d-none d-md-block">
...
</div>
<div class="card d-none d-lg-block">
...
</div>
<div class="card d-none d-xl-block">
...
</div>
</div>
</div>如何cards在小螢屏上繼續顯示前三個附加？
uj5u.com熱心網友回復：
card-groupdisplay: flex;默認情況下，使用 Bootstrap會丟失575px。您可以做的是card-group使用 CSS 或行內 Bootstrap 類設定始終具有 flex-display。您還可以考慮使用帶有行的網格系統但是，父級card-group仍然會在 575 處失去 flex。
只需d-flex在您的父級上添加一個類即可。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="card-group d-flex">
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card d-none d-md-block">
...
</div>
<div class="card d-none d-lg-block">
...
</div>
<div class="card d-none d-xl-block">
...
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384457.html
標籤：html css 推特引导 响应式设计 bootstrap-5