html排版问题，想要批量导入数据呈现每行2个数据

在编写html的时候，想要数据显示为每行2个数据。
但由于数据是批量导入的，所以不知道该怎么改，目前所有数据都显示成1列了。
{% block main_body %}

 
    <link href="{% static 'web/plugins/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
    <link href="{% static 'web/plugins/slick/slick.css' %}" rel="stylesheet">
    <link href="{% static 'web/plugins/slick-nav/slicknav.css' %}" rel="stylesheet">
    <link href="{% static 'web/plugins/wow/animate.css' %}" rel="stylesheet">
    <link href="{% static 'web/css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'web/css/theme.css' %}" rel="stylesheet">


    <div class="wrap">
    <div class="main">
        <div class="building" >
            {% for vo in buildinglist %}
                <div class="container">
                    <div class="row">
                    <div class="col-lg-4 col-sm-6 layout-item-wrap">
                    <article class="property layout-item clearfix">
                    <figure class="feature-image">
                        <a class="clearfix zoom" href="#"><img data-action="zoom" src="/static/uploads/building/{{ vo.cover_pic }}" alt="">a>
                    figure>
                    <div class="property-contents clearfix">
                    <header class="property-header clearfix">
                        <div class="pull-left">
                            <h6 class="entry-title"><a href="#">{{ vo.name }}a>h6>
                            <span class="property-location"><i class="fa fa-map-marker">i> {{ vo.address }}span>
                        div>
                    header>
                    div>
                    article>
                    div>
                    div>
                div>
            {% endfor %}
            div>
            <div>
                <ul class="pagination pagination-sm no-margin pull-right">
                    <li><a href="{% url 'web_building_index' 1 %}">首页a>li>
                    <li><a href="{% url 'web_building_index' pIndex|add:-1 %}?{{mywhere|join:'&'}}">上一页a>li>
                    {% for p in plist %}
                    <li {% if p == pIndex %}class="active" {% endif %}><a href="{% url 'web_building_index' p %}">{{p}}a>li>
                    {% endfor %}
                    <li><a href="{% url 'web_building_index' pIndex|add:1 %}?{{mywhere|join:'&'}}">下一页a>li>
                    <li><a href="{% url 'web_building_index' maxpages %}">尾页a>li>
                ul>
            div>
        div>
    div>
{% endblock %}
目前就所有数据都在一列

img

你循环的位置错了 在 class="row" 这个元素下面循环，你下面有bootstrap的col-lg-4 col-sm-6 ,应该会大屏显示3个 小屏显示2个，可以自行修改这个class

该回答引用ChatGPT

要让每行显示两个数据，您需要将每个循环项的HTML放在一个 div 元素中，并为这个 div 元素添加一个 col-lg-6 类（Bootstrap 栅格系统中的类）。这将使每个 div 元素占据父容器的一半宽度。

以下是更新后的代码：

{% block main_body %}

 
    <link href="{% static 'web/plugins/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
    <link href="{% static 'web/plugins/slick/slick.css' %}" rel="stylesheet">
    <link href="{% static 'web/plugins/slick-nav/slicknav.css' %}" rel="stylesheet">
    <link href="{% static 'web/plugins/wow/animate.css' %}" rel="stylesheet">
    <link href="{% static 'web/css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'web/css/theme.css' %}" rel="stylesheet">


    <div class="wrap">
    <div class="main">
        <div class="building" >
            {% for vo in buildinglist %}
                <div class="container">
                    <div class="row">
                    <div class="col-lg-6 layout-item-wrap">
                    <article class="property layout-item clearfix">
                    <figure class="feature-image">
                        <a class="clearfix zoom" href="#"><img data-action="zoom" src="/static/uploads/building/{{ vo.cover_pic }}" alt=""></a>
                    </figure>
                    <div class="property-contents clearfix">
                    <header class="property-header clearfix">
                        <div class="pull-left">
                            <h6 class="entry-title"><a href="#">{{ vo.name }}</a></h6>
                            <span class="property-location"><i class="fa fa-map-marker"></i> {{ vo.address }}</span>
                        </div>
                    </header>
                    </div>
                    </article>
                    </div>
                    </div>
                </div>
            {% endfor %}
            </div>
            <div>
                <ul class="pagination pagination-sm no-margin pull-right">
                    <li><a href="{% url 'web_building_index' 1 %}">首页</a></li>
                    <li><a href="{% url 'web_building_index' pIndex|add:-1 %}?{{mywhere|join:'&'}}">上一页</a></li>
                    {% for p in plist %}
                    <li {% if p == pIndex %}class="active" {% endif %}><a href="{% url 'web_building_index' p %}">{{p}}</a></li>
                    {% endfor %}
                    <li><a href="{% url 'web_building_index' pIndex|add:1 %}?{{mywhere|join:'&'}}">下一页</a></li>
                    <li><a href="{% url 'web_building_index' maxpages %}">尾页</a></li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

修改这个容器的样式，增加 flex 相关设置，d-flex，wrap相关 row，然后追加一个 building > div 的宽度样式设置

比如 .row2 > div {max-width:50%;} .row3 > div {max-width:33%} 之类的，也追加到这个容器上即可

参考GPT和自己的思路，可以在循环中对每两个数据包装在一个 div 元素中，然后再将这个 div 元素包装在一个 row 元素中，如下所示：

<div class="building" >
    {% for vo in buildinglist %}
        {% if forloop.counter0|divisibleby:2 %}
            <div class="row">
        {% endif %}
        <div class="col-lg-4 col-sm-6 layout-item-wrap">
            <article class="property layout-item clearfix">
                <figure class="feature-image">
                    <a class="clearfix zoom" href="#"><img data-action="zoom" src="/static/uploads/building/{{ vo.cover_pic }}" alt=""></a>
                </figure>
                <div class="property-contents clearfix">
                    <header class="property-header clearfix">
                        <div class="pull-left">
                            <h6 class="entry-title"><a href="#">{{ vo.name }}</a></h6>
                            <span class="property-location"><i class="fa fa-map-marker"></i> {{ vo.address }}</span>
                        </div>
                    </header>
                </div>
            </article>
        </div>
        {% if forloop.counter|divisibleby:2 or forloop.last %}
            </div>
        {% endif %}
    {% endfor %}
</div>

上面的代码中，使用了 forloop.counter 获取当前循环次数，然后使用 divisibleby 过滤器判断是否是偶数，然后在需要换行的位置插入 row 元素。如果循环到最后一个元素时也需要添加 row 元素，那么就需要使用 forloop.last 来判断是否是最后一个元素。