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。

将div移至下一行

1 个答案: