bootstrap + django，包装卡片答案

【问题标题】：bootstrap + django, wrapping cardsbootstrap + django，包装卡片
【发布时间】：2019-05-29 10:59:11
【问题描述】：

我有一个小问题。

我将遍历数据库记录并为每条记录打印一张卡片。问题是，如果我不能为每行设置一个新行，我最终会在两行卡片之间出现这种可怕的压扁布局

我怎样才能循环，为每个人制作一张卡片并且仍然让它看起来不错？

谢谢！！

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

【问题讨论】：

标签： html django bootstrap-4

【解决方案1】：

只需使用间距工具。例如：

<div class="col-4 py-3"> 
  <div class="card" style="width: 18rem;">
  ...
  </div>
</div>

【讨论】：