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日

悬赏问题

  • ¥15 python+selenium,在新增时弹出了一个输入框
  • ¥15 苹果验机结果的api接口哪里有??单次调用1毛钱及以下。
  • ¥20 学生成绩管理系统设计
  • ¥15 来一个cc穿盾脚本开发者
  • ¥15 CST2023安装报错
  • ¥15 使用diffusionbert生成文字 结果是PAD和UNK怎么办
  • ¥15 有人懂怎么做大模型的客服系统吗?卡住了卡住了
  • ¥20 firefly-rk3399上启动卡住了
  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch