html - Bootstrap 5 张卡片垂直显示
问题描述
我的网页上有一些卡片当前水平显示在一行中。我想让这些移动垂直显示在较小的屏幕上。目前,它们只是在屏幕缩小时离开页面。我仍然希望卡片均匀分布(当前使用.justify-content-between
)。卡的代码是
<!-- Cards -->
<div class="d-flex justify-content-around mb-3">
<div class="p-2">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i3-10105F.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i3-10105F <span class="badge bg-success">New</span></h4>
<h5 class="card-title">$130</h5>
<p class="card-text">
4 Cores 8 Threads <br>
Core Clock: 3.70 GHz <br>
Boost Clock: 4.40 GHz <br>
LGA1200 Socket
</p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/203474/intel-core-i310105f-processor-6m-cache-up-to-4-40-ghz/specifications.html?wapkw=i3-10105F" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i3-10105f-3.7ghz-quad-core-cpu-bx8070110105f" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="p-2">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i5-11600KF.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i5-11600KF <span class="badge bg-success">New</span></h4>
<h5 class="card-title">$389</h5>
<p class="card-text">
6 Cores 12 Threads <br>
Core Clock: 3.90 GHz <br>
Boost Clock: 4.90 GHz <br>
LGA1200 Socket
</p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/212276/intel-core-i511600kf-processor-12m-cache-up-to-4-90-ghz/specifications.html" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i5-11600kf-3.9ghz-six-core-cpu-(no-cooler)-bx8070811600kf" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="p-2">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i9-11900K.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i9-11600K <span class="badge bg-secondary">Recommended</span></h4>
<h5 class="card-title">$749</h5>
<p class="card-text">
8 Cores 16 Threads <br>
Core Clock: 3.50 GHz <br>
Boost Clock: 5.30 GHz <br>
LGA1200 Socket
</p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/212325/intel-core-i911900k-processor-16m-cache-up-to-5-30-ghz/specifications.html?wapkw=i9-11900k" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i9-11900k-3.50ghz-8-core-cpu-(no-cooler)-bx8070811900k" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
</div>
任何帮助是极大的赞赏。
解决方案
将网格类 ( row > col
) 用于响应行为。例如...
<div class="container-fluid">
<div class="row justify-content-around mb-3">
<div class="col-lg-4">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i3-10105F.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i3-10105F <span class="badge bg-success">New</span></h4>
<h5 class="card-title">$130</h5>
<p class="card-text"> 4 Cores 8 Threads <br> Core Clock: 3.70 GHz <br> Boost Clock: 4.40 GHz <br> LGA1200 Socket </p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/203474/intel-core-i310105f-processor-6m-cache-up-to-4-40-ghz/specifications.html?wapkw=i3-10105F" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i3-10105f-3.7ghz-quad-core-cpu-bx8070110105f" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i5-11600KF.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i5-11600KF <span class="badge bg-success">New</span></h4>
<h5 class="card-title">$389</h5>
<p class="card-text"> 6 Cores 12 Threads <br> Core Clock: 3.90 GHz <br> Boost Clock: 4.90 GHz <br> LGA1200 Socket </p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/212276/intel-core-i511600kf-processor-12m-cache-up-to-4-90-ghz/specifications.html" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i5-11600kf-3.9ghz-six-core-cpu-(no-cooler)-bx8070811600kf" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i9-11900K.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i9-11600K <span class="badge bg-secondary">Recommended</span></h4>
<h5 class="card-title">$749</h5>
<p class="card-text"> 8 Cores 16 Threads <br> Core Clock: 3.50 GHz <br> Boost Clock: 5.30 GHz <br> LGA1200 Socket </p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/212325/intel-core-i911900k-processor-16m-cache-up-to-5-30-ghz/specifications.html?wapkw=i9-11900k" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i9-11900k-3.50ghz-8-core-cpu-(no-cooler)-bx8070811900k" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
</div>
</div>
演示:https ://codeply.com/p/RX3tviIzOB
注意:固定宽度的卡片不适用于响应速度。
推荐阅读
- javascript - Redis节点如何在函数async/await中返回True
- android - Android 到 iOS 空投?
- node.js - Azure 应用服务上的节点如何启动?
- security - SharePoint 站点中用户的安全查询
- jquery - 使用jQuery选择文件后如何检索文件的路径
- vue.js - 为什么我的 Vuex getter 在客户端返回 TRUE 而在服务器端返回 FALSE?
- android - 如何隐藏 ActionBar 但仍在左上角显示导航菜单图标
- npm - 您的 yo 版本已过时
- swift - 使用 UIPanGestureRecognizer 在 UIImageView Swift 4 中更改图像
- python - 如何使用 Django 设置 Apache