Набор форм Django по одной форме в каждой строке

#html #django #django-forms

Вопрос:

Как разместить каждую форму набора форм на горизонтальной линии, одну под другой, без использования таблицы? Мой html-код помещает все в одну строку.

Любая помощь очень ценится.

HTML

 [<div class="form-group row">
<div class="row">
{{ formset.management_form }}
{% for form in formset.forms %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
<div class="col-sm-2">
    {{ form.logical_operator|as_crispy_field }}
</div>
<div class="col-sm-3">
    {{ form.event|as_crispy_field }}
</div>
<div class="col-sm-2">
    {{ form.operator|as_crispy_field }}
</div>
<div class="col-sm-2">
    {{ form.event_value|as_crispy_field }}
</div>
<div class="col-md-1 align-self-center delete-form">
    <button onclick="exclude(this)" type="button"
            title="Excluir"
            class="btn  btn-danger btn-sm">
        <i class="feather icon-trash-2"></i>
    </button>
</div>
{% endfor %}
</div>
</div>
 

изображение с экрана

Ответ №1:

Пожалуйста, попробуйте использовать </br> команду (разрыв строки) :

 <h1> HEllo</h1> </br> <h2>How are you</h2> 

Комментарии:

1. </br> определенно нет допустимого HTML. Пишите <br/> или лучше просто <br> .

Ответ №2:

Эта реорганизация решила проблему.

Спасибо за помощь!

 <div class="form-group row">
    <div class="col-sm-12">
        {{ formset.management_form }}
        {% for form in formset %}
        {% for hidden in form.hidden_fields %}
        {{ hidden }}
        {% endfor %}
        <div class="row">
            <div class="col-sm-2">
                {{ form.logical_operator|as_crispy_field }}
            </div>
            <div class="col-sm-3">
                {{ form.event|as_crispy_field }}
            </div>
            <div class="col-sm-2">
                {{ form.operator|as_crispy_field }}
            </div>
            <div class="col-sm-2">
                {{ form.event_value|as_crispy_field }}
            </div>
            <div class="col-md-1 align-self-center delete-form">
                <button onclick="exclude(this)" type="button"
                        title="Excluir"
                        class="btn  btn-danger btn-sm">
                    <i class="feather icon-trash-2"></i>
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
</div>