模态内部的bootstrap形式未正确对齐 [英] bootstrap form inside modal not aligned properly

问题描述

我尝试使用bootstrap（水平形式）制作模态表单，并在字段下显示字段。我知道如何修复它，以便输入文本框位于标签的右侧而不是它们下面？

I tried to make a modal form using bootstrap (horizontal form) and the field are shown under the labels. Any idea how can I fix it so the input text boxes will be at the right of the labels and not under them?

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

推荐答案

您需要将表单水平声明放入模态体声明。这有效。

You need to place the form-horizontal declaration in with the modal-body declaration. This works.

< div class =modal-body form-horizo​​ntal>

这篇关于模态内部的bootstrap形式未正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！