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

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的代码.如果您对此有任何想法,那将非常有帮助.

您可以在此链接上查看索引页面的源代码,以及此JSFiddle上的工作演示.要查看有问题的行为,请将结果框的大小调整为中等显示.

除了我创建自己的css之外,所有的js和css都是默认的bootstrap.

Answer 1

为什么会这样:

出现此问题是因为col-XX-XX该类浮动元素.浮动导致div带有字段的s 溢出其contains div(.modal-body).

如何解决:

在添加columns(.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/