bootstrap Form innerhalb Modal nicht richtig ausgerichtet

Question

Ich habe versucht, ein modales Formular mit Bootstrap (horizontale Form) und das Feld sind unter den Etiketten. Irgendeine Idee, wie ich es beheben kann, so dass die Eingabetextfelder auf der rechten Seite der Etiketten und nicht unter ihnen sind?

<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

die Sie interessieren,

<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

Answer 2

Sie müssen die form horizontale Erklärung in der modalen Körper Erklärung platzieren. Das funktioniert.

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

Answer 3

ich Bootstrap V3.3.2 verwenden. Ich war gestern in einer ähnlichen Situation und das hat für mich geklappt.

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