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

Question

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

<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 - 查看 fiddle 中的问题 - 水平展开结果框架，您会看到同样的问题发生。我现在想知道这是否与影响表单组元素的模式中的布局有关

Answer 1

去掉 <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