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场，但是对于第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;
}

如何使用引导网格将表单字段移动到新行？

2 个答案: