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

Question

在编写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 %}

目前就所有数据都在一列

Answer 1

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