css - 如何在 Bootstrap 中设置卡片的最小宽度?
问题描述
我正在使用 Bootstrap 卡片,当我为卡片设置最小宽度时,当我减小窗口宽度时卡片重叠,如何确保第三张卡片占据下一行(避免重叠)?
<div class="container" style="margin-top:3em;">
<div class="card-columns">
<div class="card" style="min-width: 300px;">
<img src="images/nasoclearSalineNasalSpray.png" class="card-img-top" style="max-height:500px;"alt="images">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="min-width: 300px;">
<img src="images/pedialytePowder.png" class="card-img-top" style="max-height:500px;" alt="images">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="min-width: 300px;">
<img src="images/chericofSuspension.png" class="card-img-top" style="max-height:500px;"alt="images">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
解决方案
<div class="container" style="margin-top:3em;">
<div class="card-columns custom-columns">
<div class="card">
<img src="images/nasoclearSalineNasalSpray.png" class="card-img-top" style="max-height:500px;"alt="images">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<img src="images/pedialytePowder.png" class="card-img-top" style="max-height:500px;" alt="images">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<img src="images/chericofSuspension.png" class="card-img-top" style="max-height:500px;"alt="images">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
删除宽度 min-width:300px;
添加了 .custom-columns
@media (max-width: 700px) {
.card-columns.custom-columns {
column-count: 1;
}
}
@media (min-width: 700px) {
.card-columns.custom-columns {
column-count: 2;
}
}
@media (min-width: 1000px) {
.card-columns.custom-columns {
column-count: 3;
}
}
@media (min-width: 1400px) {
.card-columns.custom-columns {
column-count: 4;
}
}
推荐阅读
- python - scrapy 在命令行上工作,但不是崇高的
- c - 编写一个接收年份的函数,如果年份是闰年则返回'y',否则返回'n'。从主函数中调用函数
- django - 如何在 DRF 中跨 3 个表序列化信息?
- python-3.x - 如何计算数据框列中特定值出现的时间
- r - 在不规则时间为持久数据点设置动画
- node.js - 反应 filepond 将文件上传到同一台服务器
- c# - CA2007 是否与 .NET Core 应用程序相关?
- php - Laravel PHP for 循环和 if 语句
- mysql - SQL - 扣除列值直到非负值
- vb.net - 实体框架 tostring() 失败并出现错误