时间戳

首页 > 解决方案 > 如何使用 Django 和 Booststarp 动态创建 div class="row"

html - 如何使用 Django 和 Booststarp 动态创建 div class="row"

问题描述

我正在尝试在我的网页中动态呈现一些卡片。我想在第一行渲染四张卡片，并想在下一行再渲染四张卡片。如何使用 django 动态渲染 div？

这是view.py

def User_View_Packages(request):
    package = Package.objects.all()
    return render(request, 'user_view_packages.html',{'package':package})

和index.html

<div class="row">
    {% for p in package %}
    <div class="col-md">
        
        <div class="card" style="width: 18rem;margin-left:5%">
            <img class="card-img-top" src="dp.39069 (1).jpeg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">{{ p.package_name }}</h5>
                <p class="card-text">STARTS FROM BDT. {{ p.package_cost }} PER PERSON</p>
                <p class="card-text">Location: INDIA</p>
                <a href="#" class="btn btn-primary">View More</a>
            </div>
        </div>
        
    </div>
    {% endfor %}
</div>

标签： htmldjangotwitter-bootstrap

解决方案

试试下面的代码

<div class="row">

{% for p in package %}

    <div class="col-md-3"><!-- HERE -->
        <div class="card mb-4 shadow-sm"><!-- HERE -->
            <img class="card-img-top" src="dp.39069 (1).jpeg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">{{ p.package_name }}</h5>
                <p class="card-text">STARTS FROM BDT. {{ p.package_cost }} PER PERSON</p>
                <p class="card-text">Location: INDIA</p>
                <a href="#" class="btn btn-primary">View More</a>
            </div>
        </div><!-- /.card -->
    </div><!-- /.col-md-3 -->
   
   {% if forloop.counter|divisibleby:4 %}</div><div class="row">{% endif %}  {# HERE #}

{% endfor %}

</div><!-- /.row -->

参考https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#divisibleby

推荐阅读