我正在使用 Flask 中的 Jinja2 将列表呈现到 html 页面。 我想使用 Jinja2 循环使用该列表中的一些数据创建卡片组。
我当前的 HTML 代码:
<div class="container-fluid">
<div class="row">
<div class="card-deck">
{% for l in list %}
<div class="col-sm-4">
<div class="card">
<div class="card-body">
{{ l[0] }}
{{ l[4] }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
结果:
我不想要那些额外的红色空格:
我怎样才能删除它们?
谢谢
最佳答案
通过使用这个例子解决: https://www.bootply.com/118335
从这个问题: Is it possible to create a pinterest-like layout with Bootstrap only?
更新后的代码:
HTML:
<div class="container-fluid">
<div class="row" id="row_posts">
{% for l in list %}
<div class="col-sm-4" id="col_posts">
<div class="card" id="card_posts">
<div class="card-body">
{{ l[0] }}
{{ l[4] }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
CSS:
*, *:before, *:after {box-sizing: border-box !important;}
#row_posts {
-moz-column-width: 22em;
-webkit-column-width: 22em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
}
#col_posts {
display: inline-block;
padding: .25rem;
width: 100%;
}
#card_posts {
position:relative;
display: block;
}
关于html - 删除卡片组中卡片之间的多余空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50201895/