删除卡片组卡片之间的额外空间

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;
}