javascript - 元素漂浮在 Bootstrap 模式之外

Question

我在模态框内有一个表单。当窗口的尺寸很小时，一切都很好。如果我最大化窗口，那么表单的元素就会漂浮在模态之外。我已经检查了我所有的 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">&times;</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

您需要将类 .form-horizo​​ntal 添加到 form 元素。这使得 .form-group 充当行。在一些边距旁边，这添加了一个 clearfix 来阻止列“ float ”。