fanfanacs 2023-02-28 10:20 采纳率: 100%
浏览 62
已结题

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

  • 写回答

5条回答 默认 最新

  • 简效 2023-02-28 10:36
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 3月8日
  • 已采纳回答 2月28日
  • 创建了问题 2月28日

悬赏问题

  • ¥50 决策面并仿真,要求有仿真结果图
  • ¥15 springboot接入微信支付SDK
  • ¥50 大区域的遥感影像匹配 怎么做啊
  • ¥15 求解答:pytorch跑yolov8神经网络受挫
  • ¥20 Js代码报错问题不知道怎么解决
  • ¥15 gojs 点击按钮node的position位置进行改变,再次点击回到原来的位置
  • ¥20 halcon 图像拼接
  • ¥15 webstorm上开发的vue3+vite5+typeScript打包时报错
  • ¥15 vue使用gojs,需求在link中的虚线上添加方向箭头
  • ¥15 CSS通配符清除内外边距为什么可以覆盖默认样式?