模态内部的bootstrap形式未正确对齐

Question

我尝试使用bootstrap(水平形式)制作模态形式,并在标签下显示该字段.任何想法如何解决它,所以输入文本框将位于标签的右侧,而不是在它们下面？

 <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close specialb" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">

        <form class="form-horizontal" class="non-margined">
                <div class="control-group">
                    <label class="control-label" for="firstName">First name:</label>
                    <div class="controls">
                        <input type="text" id="firstName" placeholder="FirstName" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="lastName">Last name:</label>
                    <div class="controls">
                        <input type="password" id="lastName" placeholder="LastName" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="emailAddress">Email Address:</label>
                    <div class="controls">
                        <input type="password" id="emailAddress" placeholder="EmailAddress" />
                    </div>
                </div>  
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Answer 1

您需要将form-horizo​​ntal声明放在modal-body声明中.这有效.

<div class="modal-body form-horizontal">

Answer 2

尝试这个，

\n\n

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>\n\n<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">\n    <div class="modal-header">\n        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">\xc3\x97</button>\n\n<h3 id="myModalLabel">Modal header</h3>\n\n    </div>\n    <div class="modal-body">\n        <form class="form-horizontal">\n            <div class="control-group">\n                <label class="control-label" for="inputEmail">Email</label>\n                <div class="controls">\n                    <input type="text" id="inputEmail" placeholder="Email">\n                </div>\n            </div>\n            <div class="control-group">\n                <label class="control-label" for="inputPassword">Password</label>\n                <div class="controls">\n                    <input type="password" id="inputPassword" placeholder="Password">\n                </div>\n            </div>\n            <div class="control-group">\n                <div class="controls">\n                    <label class="checkbox">\n                        <input type="checkbox">Remember me</label>\n                    <button type="submit" class="btn">Sign in</button>\n                </div>\n            </div>\n        </form>\n    </div>\n    <div class="modal-footer">\n        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>\n        <button class="btn btn-primary">Save changes</button>\n    </div>\n</div>\n

\n\n

工作演示

\n