引导面板中 wtf.form_field 周围的边距

Question

当我使用 quick_form 输出我的表单时，我在表单周围有一个很好的边距，如下所示。

<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  <div class="panel-body">
    {{ wtf.quick_form(form, form_type="basic") }}
  </div>
</div>

但是 quick_form 方法并没有给我我需要的表单控制级别，因此我需要单独输出表单字段。但是，当我这样做时，表单字段周围没有任何边距。

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  <div class="panel-body">

            <form class="form form-horizontal" method="post" role="form">
                <div>{{ wtf.form_field(form.floors) }}</div>
                <div>{{ wtf.form_field(form.submit) }}</div>
            </form>
  </div>
</div>

如何保留上面第二个示例中的边距？

Answer 1

正如 DavidDomain 所建议的，我观察到的问题是由于表单水平表单定义引起的。将表单定义为 form-group 解决了边距问题。