Question

我在一个带有2个文本字段和2个按钮的模态对话框中有一个表单元素。但是，我对表单组元素有一些填充问题。当我使用FireFox检查CSS元素时，我看到form-group元素已被压缩而未按原样填充。当我在常规页面中使用form-group元素时，我没有这个问题。我想知道这是否与模态对话框有关。有人可以建议吗？代码如下，屏幕截图

Form-group padding is compressed in the modal dialog

<form role="form" action="edit-user.settings.controller.php" method="post" id="edit-user-form">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="link-job-modal-label">Edit User</h4>
        </div> <!-- .modal-header -->

        <div class="modal-body">
            <div class="form-group">
                <div class="col-md-12 col-sm-12">
                    <input type="text" class="form-control input-lg" id="first-name" name="firstName" placeholder="First name" />
                </div>
            </div> <!-- .form-group -->
            <div class="form-group">
                <div class="col-md-12 col-sm-12">
                    <input type="text" class="form-control input-lg" id="last-name" name="lastName" placeholder="Last name" />
                </div>
            </div> <!-- .form-group -->
        </div> <!-- .modal-body -->
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id-"cancel-btn">
                Cancel
            </button>
            <button type="button" class="btn btn-primary" id="save-btn">
                Save
            </button>
        </div> <!-- .modal-footer -->
    </form> <!-- End of edit-user-form -->

另外 - 这是一个fiddle - 要看小提琴中的问题 - 横向展开，结果框架，你会发现同样的问题。我现在想知道这是否与影响表单组元素的模式中的布局有关

Answer 1

这是因为bootstrap CSS中的这个规则：

@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4,
    .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
    .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }
}

通过浮动它，您将从正常文档流中删除input元素的父元素，导致前父级.form-group崩溃。一种可能的解决方案是应用一个简单的clearfix，将overflow: hidden声明为.form-group，即：

.form-group {
    overflow: hidden;
}

http://jsfiddle.net/teddyrised/02g22qxk/6/

或者，从包含.col-类的不必要的div中打开表单输入。

Answer 2

摆脱围绕标签/输入的<div class="col-md-12 col-sm-12">。

<div class="form-group">
    <label class="sr-only" for="first-name">Name</label>
    <input type="text" class="form-control input-lg" id="name" name="name" placeholder="Name (first last)" />
</div>
<div class="form-group">
    <label class="sr-only" for="email">E-mail</label>
    <input type="email" class="form-control input-lg" id="email" name="email" placeholder="e-mail" />
</div>

最佳做法是不要远离Bootstrap Documentation，有很好的例子，你可以轻松地遵循这些例子。

<强> JS Fiddle Demo

填充问题 - 模态对话框中的表单组

2 个答案: