如何在同一行显示多个引导卡

Question

我正在尝试使用 bootstrap 4 在卡片中显示从数据库中检索到的数据数据已正确检索，但问题在于这些卡片的显示，因为它只是以垂直方式显示在一行中的每张卡片上。

我需要的是在同一行显示3或4张卡片。

代码：

{% for obj in object_list %}
<div class="container">
    <div class="row">
        <div class="col-md-4">

            <div class="card">
                <!--Card image-->
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" alt="Card image cap">

                <!--Card content-->
                <div class="card-body">
                    <!--Title-->
                    <h4 class="card-title">name:{{ obj.name}}</h4>
                    <!--Text-->
                    <p class="card-text">{{obj.content}}</p>
                    <a href="#" class="btn btn-primary">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>

{% endfor %}

Answer 1

使用

{% for object in obj %} {% endfor %}

并将您的内容放在中间。如果您遇到图像问题，请尝试将它们存储在特殊文件夹中，并在 {{ obj.image.url }} 中添加 .url。 设置.py：

MEDIA_URL = 'media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

urls.py：

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

另外，您可以使图像可点击（没有此块图像不会显示）

{% if project.url %}
<a href="{{ obj.url }}">
    <div class="ratio ratio-4x3">
        <img src="{{ obj.image.url }}" class="img-fluid mb-2">
    </div>
</a>
{% else %}
<div class="ratio ratio-4x3">
    <img src="{{ obj.image.url }}" class="img-fluid mb-2">
</div>
{% endif %}

Answer 2

将容器和行移到 for 循环之外 您可以使用它在单行中显示四个项目