如何将表单字段移动到带有 bootstrap 网格的新行？

Question

我正在使用 django-bootstrap3 form，我想稍微改变一下。这是我正在使用的代码：

<div class="row">
  {% for field in form %}
    {% bootstrap_field field form_group_class='col-md-6 form-group label-floating' %}
    {% if field.name == 'field3' %}
      <!-- what should I add here -->
    {% endif %}

  {% endfor %}
</div>

它创建了两列表单字段，因为有 col-md-6。我想将字段从第二列移到新行。我如何在我的代码中执行此操作？

field1     field2
field3     field4
field5     field6

我希望字段按如下方式排序：

field1     field2
field3     
field4     field5
field6

Answer 1

您不能将您的 if 条件移动到您对 col-md-6 的应用之上吗？我不熟悉 django 的语法，但像这样：

{% for field in form %}
  {% if field.name == 'field3' %}
      {% bootstrap_field field form_group_class='col-md-12 form-group label-floating' %}
  {% else %}
    {% bootstrap_field field form_group_class='col-md-6 form-group label-floating' %}  
  {% endif %}
{% endfor %}

Answer 2

简单易行，只需使用 col-md-6，因为您已经为字段 1 和字段 2 使用了 col-md-6，但对于字段 3 使用 col-md-6 和 col-md-offset-6。

所以需要如下：

<div class="col-md-6"></div><div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div><div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>

使用CSS改变偏移方向：

.col-md-offset-6 {
      margin-right: 50% !important;
}