django - bootstrap : for 循环中的卡片
问题描述
我尝试使用 Bootstrap 中的卡片在数据库中显示来自不同股票的一些信息。我正在使用 DJANGO 的模板引擎,并且已经有了下面的代码。在桌面上,三张牌后显示新行,但第一行和第二行之间没有空格。当在移动设备上显示时,所有卡片都在彼此下方,但同样没有空间。如何在卡片之间添加一些额外的空间?
<div class="container">
<div class="row">
{% for security in securities %}
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="{% static "public/engie.jpg" %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ security.name }}</h5>
<p class="card-text">Text here</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">{{ security.quote }}</li>
<li class="list-group-item">{{ security.lastchange_pct }}</li>
<li class="list-group-item">{{ security.remarks }}</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
{% endfor %}
解决方案
为您的类添加边距或创建具有边距的新类或将其写入<div style="col-sm-4">
.
<div class="container">
<div class="row">
{% for security in securities %}
<div class="col-sm-4 card-space">
<div class="card" style="width: 18rem;">
...
在您的 css 文件中:
.card-space {
margin-bottom: 20px;
}
或者更好地使用引导间距类,例如
<div class="container">
<div class="row">
{% for security in securities %}
<div class="col-sm-4 mb-3">
<div class="card" style="width: 18rem;">
还可以看看@Tim Vermaelen的这个解决方案:
推荐阅读
- php - 链接到自定义存档页面链接到页面模板
- javascript - 拒绝为 Redocly 执行内联脚本
- git - 'git pull origin develop --rebase' 和 'git pull --rebase origin develop' 之间的区别
- integration-testing - 创建赛普拉斯报告时禁用屏幕截图生成
- rust - 如果 Drop 出现恐慌,我可以(并且应该)做什么?无论如何我可以释放其他资源吗?
- spring-cloud-gateway - 禁止未经身份验证的请求并在 Spring Cloud Gateway 的 http 正文中写入错误消息
- reactjs - react-router-domv5 +历史推送不渲染组件
- c - 使用 perf 分析多进程无限循环
- python - 如何在boto3 dynamoDB python中查询“不等于”
- php - 使用 preg_replace 替换 href 值并防止重复问号