所以我有三张卡片排成一排,但它们都没有边缘地粘在一起,看起来很难看。我希望每张卡片之间有一些余量,所以我添加了余量,但它破坏了 Bootstrap 提供的响应能力。因此我只添加了填充。任何帮助将不胜感激
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4 card" style="padding:20px">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'>
</a>
<div class="card-body">
<h5 class="card-title">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">{{ all_episode.title }}</a>
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
<a href="{% url 'series_detail' slug=all_episode.series.slug %}">{{ all_episode.series }}</a>
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
{% endfor %}
</div>
最佳答案
你可以调整卡片
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4">
<div class="card" style="padding:20px">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'>
</a>
<div class="card-body">
<h5 class="card-title">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">{{ all_episode.title }}</a>
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
<a href="{% url 'series_detail' slug=all_episode.series.slug %}">{{ all_episode.series }}</a>
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
</div>
{% endfor %}
</div>
关于html - 如何在不破坏响应能力的情况下增加边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56285776/