Question

我需要帮助找出为什么div标签不包含它应该的形式。

<div class="modal-body">
                <form class="register" name="register">
                    <div class="form-group col-md-6">
                        <input type="text" placeholder="First Name" class="form-control" id="firstName">
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" placeholder="Last Name" class="form-control" id="lastName">
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" placeholder="Email Address" class="form-control" id="emailAddress">
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" placeholder="Birth Day mm/dd/yyyy" class="form-control" id="birthday">
                    </div>
                </form>                                         
            </div>

这是特定div的代码。如果您对此有任何想法，那将非常有帮助。

您可以看到source code for the index page on this link和working demo on this JSFiddle。要查看有问题的行为，请将结果框的大小调整为中等显示。

所有js和css都是默认引导程序，除非我创建了自己的css。

Answer 1

为什么会发生这种情况：

发生此问题是因为col-XX-XX类会浮动元素。浮动会导致div s的字段溢出，其中包含div（.modal-body）。

如何修复：

在添加列（.col-md-6）时，应将它们放在一行（.row）中。将类.row添加到表单中，让Bootstrap发挥其魔力：

<form class="register row" name="register">

你可以看到它在这个JSFiddle上工作：http://jsfiddle.net/a3jv8z84/2/，它不需要额外的CSS规则：）

编辑（上一个答案）：使.modal-body动态增长并将其高度调整为浮动元素。你可以通过添加这个简单的CSS来做到这一点：

.modal-body {
    height:auto;
    overflow:auto;
}

这将解决问题，正如您在此JSFiddle上看到的那样：http://jsfiddle.net/a3jv8z84/1/

Bootstrap模态形式，Div不包含形式

1 个答案: