jquery - 模态内的引导表单未正确对齐

Question

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

 <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

我正在使用引导程序 v3.3.2。昨天我也遇到了类似的情况，这对我来说很有效。

<form class="form-horizontal" id="step2">
              <div class="form-group">
                  <label for="name" class="col-sm-2 control-label">Name</label>
                  <div class="col-sm-10">
                    <input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" />
                  </div>
              </div>
              <div class="form-group">
              <label for="email" class="col-sm-2 control-label">Email-Id</label>
                  <div class="col-sm-10">
                    <input id="email" class="form-control" type="email" placeholder="Enter Your Email-Id" />                  
                  </div>
              </div>

Answer 3

尝试这个，

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<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" data-dismiss="modal" aria-hidden="true">×</button>

<h3 id="myModalLabel">Modal header</h3>

    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputEmail">Email</label>
                <div class="controls">
                    <input type="text" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                    <input type="password" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox">Remember me</label>
                    <button type="submit" class="btn">Sign in</button>
                </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>

工作演示