html - 删除卡片组中卡片之间的多余空格

Question

我正在使用 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>

结果:

我不想要那些额外的红色空格:

我怎样才能删除它们？

谢谢

Answer 1

通过使用这个例子解决: 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;
}