元素漂浮在 bootstrap 模态之外

Question

我在模态框内有一个表单。当 window 的大小很小时，一切都很好。如果我最大化 window 那么表单的元素就会漂浮在模态之外。我已经检查了我所有的 css 样式等，但似乎没有任何冲突。我也在 JSFiddle 上设置了它，它似乎也发生了，只有 JQuery 和 Bootstrap。它似乎与我的代码有关，但我不知道是什么。你能帮我看看吗？

http://jsfiddle.net/dsryycbq/

<div id="editPassword" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editPasswordlbl" aria-hidden="true">
        <div class="vertical-alignment-helper">
            <div class="modal-dialog modal-sm vertical-align-center">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="editPasswordlbl">Change Password</h4>
                    </div>
                    <div class="modal-body">
                        <form action="{{url_for('admin')}}" role="form" id="editPasswordForm" method="post">
                            <input type="hidden" name="formType" value="changePassword">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Password</label>
                                <div class="col-sm-5">
                                    <input type="password" class="form-control" name="password" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Repeat Password</label>
                                <div class="col-sm-5">
                                    <input type="password" class="form-control" name="confirmPassword" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-9 col-sm-offset-3">
                                    <!-- Do NOT use name="submit" or id="submit" for the Submit button -->

                                    <button type="submit" class="btn btn-default">Confirm</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

您需要将 class .form-horizontal 添加到 form 元素。这使得 .form-group 充当行。在一些边距旁边，这添加了一个 clearfix，它停止了来自 "floating".

的列

元素漂浮在 bootstrap 模态之外

Elements are floating outside of bootstrap modal

html

javascript

css

jquery

twitter-bootstrap