Question

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

卡之间没有空间。

{% 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 %}

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

Answer 1

您的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 %}
    {% 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 %}

Answer 2

首先，您需要对每张卡进行循环，而不是对内部div的“ card-header”和“ card-body”进行循环。其次，要回答您的问题，您应该使用spacing填充或填充。

我建议将卡片设置为标准宽度，并使用“右边距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 %}

除此解决方案外，建议您阅读Bootstaps Grid Layout documentation，以便将这些卡很好地放在内容块中。

如何在两张卡之间增加空间-引导程序？

2 个答案: