Не заполненные поля формы Bootstrap Модальные

Question

Я пытаюсь реализовать модальную форму bootstrap в моем проекте Django. Когда я делаю это, все работает, за исключением того, что поля работают намного шире модального окна и выглядят странно смещенными. Я чувствую, что это легко исправить, но я не могу точно определить, что я делаю неправильно. Вот мой html для модальной формы:

модальный. html

<form method="post" action="">
  {% csrf_token %}

 <div class="modal-header">
    <h5 class="modal-title">Create new Book</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">
    {{form.Reference_Number|as_crispy_field}}
    {{form.Ultimate_Consignee|as_crispy_field}}
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="submit-btn btn btn-primary">Create</button>
  </div>

</form>

Answer 1

Попробуйте поместить каждое хрустящее поле формы в контейнер Bootstrap form-group <div>. Как это:

<div class="modal-body">
  <div class="form-group">
    {{form.Reference_Number|as_crispy_field}}
  </div>
  <div class="form-group">
    {{form.Ultimate_Consignee|as_crispy_field}}
  </div>
</div>

Подробнее о Bootstrap формах здесь