Bootstrap 3表单使用pull-right div重叠

Question

我正在尝试将我的按钮设置在表单上方，右侧。按钮放置在正确的位置，但表单与按钮的水平位置重叠。我正在使用“＆lt; br＆gt;”为了避免这种情况，但我知道这不是最好的。如何解决？

<form class="form-horizontal" id="frm_item" name="frm_item" method="POST">
    {% csrf_token %}
    <div class="pull-right">
        <button type="submit" class="btn btn-primary">Save</button>
    </div>
    {% for field in form %}
        <div class="form-group">
            <label for="{{ field.auto_id }}" class="col-sm-2 control-label">{{ field.label }}:</label>
            <div class="col-sm-10">
                {{ field|add_class:'form-control' }}
            </div>
        </div>
    {% endfor %}
    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#dlg_subitems" data-whatever="@mdo">Create item</button>
</form>

Answer 1

看起来您必须将按钮放在form-group

中

http://jsfiddle.net/1xoaw6ow/2/

<form class="form-horizontal">
    <div class="form-group mt-5">
        <div class="col-sm-12">
            <input type="button" class="btn btn-primary pull-right" value="Search" />
        </div>
    </div>
    <div class="form-group">
        <label for="{{ field.auto_id }}" class="col-sm-2 control-label">{{ field.label }}:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" />
        </div>
    </div>
</form>

Answer 2

尝试添加此css：

.pull-right button {
      position: absolute;
      float: right;
      margin-top: 20px;
      margin-right: 20px;
   }

在表单顶部设置一个空闲空间

.form-group {
    margin-top: 40px; /* change this */
}