模态内部的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

我正在使用bootstrap 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>

<强> Working demo