html typography problem, wanted to import data in bulk and render 2 data per line

This answer quotes ChatGPT

To display two data per row, you need to put the HTML for each loop item in a div element and add a col-lg-6 class(the class in the Bootstrap raster system) to that div element. This makes each div element take up half the width of the parent container.

Here is the updated code:

{% 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 %}

For your own ideas, you can wrap every two pieces of data in a div element within a loop, and then wrap that div element in a row element, as follows:

<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>

In the code above, you use forloop.counter to get the current number of cycles, then use the divisibleby filter to determine if it's even, and then insert the row element at the point where you need to wrap the line. If you also need to add a row element when you loop to the last element, then you need to use forloop.last to determine if it is the last element.

You're losing through the wrong position under the class="row" element, You have the col-lg-4 col-sm-6 of bootstrap below, which should display 3 on the large screen and 2 on the small screen. You can modify this class by yourself.