html - bootstrap + django,包装卡片
问题描述
我有一个快速的问题。
我将遍历数据库记录并为每条记录打印一张卡片。问题是,如果我不能为每行设置一个新行,我最终会在两行卡片之间出现这种可怕的压扁布局
我怎样才能循环播放,为每个卡片制作一张卡片并且仍然让它看起来不错?
谢谢!!
<div class="row">
<div class="col-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
解决方案
只需使用间距工具。例如:
<div class="col-4 py-3">
<div class="card" style="width: 18rem;">
...
</div>
</div>
推荐阅读
- android - 自定义域、深层链接、Firebase 动态链接和应用链接如何协同工作?
- python - 如何从表 args 为 mssql 方言关闭自动增量
- swift - NSImage 缺少 Alpha 通道
- c# - 如何在 .Net 核心中更改拒绝访问路由
- python - JSON - 匹配键值
- pandas - 将列表转换为字典
- firebase - 使用 Kotlin 在 Firebase 上上传图片和描述
- python - 无法腌制 _thread._local 对象错误
- python - Python quiz tkinter 使用提交和上一个按钮
- c# - 我可以以某种方式提示编译器在 C# 中为我计算常量表达式吗?