Web 如何在两张卡之间添加空间-引导？

我用Django创建了一个简单的博客页面。当我为文章添加卡片时，它就像

两张牌之间没有空隙

{% extends 'base.html' %}
{% block content %}
    <div class="card mt-3" style="width: 100%;">
        {% for post in posts %}
            <div class="card-header">
                <cite title="Source Title">{{ post.author }}</cite>
                <small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
            </div>
            <div class="card-body">
                <div class="card-title">{{ post.title }}</div>
                <p class="card-text">{{ post.content }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock content %}

{%extends'base.html%}
{%block content%}
{posts%%中的post为%s}
{{post.author}}
{{post.date{u posted}日期：“fd，Y”}
{{post.title}}
{{post.content}
{%endfor%}
{%endblock内容%}

---

如何在这些卡之间添加空格？

您的for循环不在正确的位置，请从中更改代码

{% extends 'base.html' %}
{% block content %}
    <div class="card mt-3" style="width: 100%;">
        {% for post in posts %}
            <div class="card-header">
                <cite title="Source Title">{{ post.author }}</cite>
                <small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
            </div>
            <div class="card-body">
                <div class="card-title">{{ post.title }}</div>
                <p class="card-text">{{ post.content }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock content %}

{%extends'base.html%}
{%block content%}
{posts%%中的post为%s}
{{post.author}}
{{post.date{u posted}日期：“fd，Y”}
{{post.title}}
{{post.content}
{%endfor%}
{%endblock内容%}

吼叫代码

{% extends 'base.html' %}
{% block content %}
    {% for post in posts %}
 <div class="card mt-3" style="width: 100%;">
       
            <div class="card-header">
                <cite title="Source Title">{{ post.author }}</cite>
                <small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
            </div>
            <div class="card-body">
                <div class="card-title">{{ post.title }}</div>
                <p class="card-text">{{ post.content }}</p>
            </div>
        
    </div>
{% endfor %}
{% endblock content %}

{%extends'base.html%}
{%block content%}
{posts%%中的post为%s}
{{post.author}}
{{post.date{u posted}日期：“fd，Y”}
{{post.title}}
{{post.content}
{%endfor%}
{%endblock内容%}

首先，您需要对每张卡执行循环，而不是对内部div“card header”和“card body”执行循环。第二，要回答你们的问题，你们应该用一个空格或者一个空格

我建议将卡片设置为标准宽度，并使用“右边距3”：

{% for post in posts %}
    <div class="card mt-3 mr-3" style="width: 250px">
        <div class="card-header">
            ...
        </div>
        <div class="card-body">
           ...
        </div>
    </div>
{% endfor %}

{%for posts in posts%}
...
...
{%endfor%}

除了这个解决方案之外，我建议您阅读Bootstaps，这样您就可以将这些卡很好地放在您的内容块中