将 div 移动到下一行

Question

在我的 Django 模板中，一些字段是使用多个 div 创建的，但所有列都在一行中

HTML

<div class="row product-form-row">

    <form method="post" id="Outwarddocketform" data-kit-url="{% url 'client:ajax_load_kit_c' %}"
          data-product-url="{% url 'client:ajax_load_product_c' %}" onkeyup="add()" class="col-md-10 proct-form"
          novalidate> {% csrf_token %}
        <div class="form-group col-md-3 mb-0">
            {{ form.transaction_date|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.dispatch_date|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.sending_location|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.flow|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.kit|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.transporter_name|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.vehicle_details|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.invoice_number|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.remarks|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.created_for|as_crispy_field }}
        </div>

        <div class="form-group col-md-3 mb-0">
            {{ form.product1|as_crispy_field }}
        </div>
        <div class="form-group col-md-3 mb-0">
            {{ form.product1_quantity|as_crispy_field }}
        </div>

        <div id="products-table" class="col-md-12 col-sm-8 col-12 product-table-ajax"></div>

        <div class="form-group col-md-12 mb-0">
            <button type="submit" class="btn btn-success">Save</button>
            <a href="{% url 'client:inward_table' %}" class="btn btn-outline-secondary" role="button">Nevermind</a>

        </div>
    </form>

这将创建一个这样的页面：

我想将product1或product1 quantity移动到下一行。 我怎样才能做到这一点 ？

基本上我想做的如下所示：

Answer 1

您可以在新行中所需的行之前添加clearfix div。

<div class="clearfix">...</div>

有关其他详细信息，请参阅https://getbootstrap.com/docs/3.4/css/?#grid-responsive-resets 。