表单字段不符合Bootstrap模态

Question

我正在尝试在Django项目中实现引导模式形式。当我这样做时，除了字段运行的范围比模态窗口宽得多之外，其他所有东西都可以正常工作，并且看起来很奇怪。我觉得这里有一个简单的解决方法，但我无法确定我在做什么错。这是我的模式形式的html：

modal.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

尝试将每个酥脆表单字段放入Bootstrapform-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>

More on info on Bootstrap forms here