Bootstrap .form horizontale Zeile nicht korrekt angezeigt

Question

Ich habe das folgende Modal, das eine horizontale Form anzeigen soll, aber es wird nicht richtig angezeigt, wie im Bild gezeigt. Die .form-horizontal sollte jede Eingabe in Zeilen erscheinen lassen, oder? Schätze jede Hilfe!

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
    Edit 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Edit Contact</h4> 
     </div> 
     <div class="modal-body"> 
     <form class="form-horizontal" method="POST" id="editForm" role="form"> 
        <div class="form-group animated fadeIn"> 
         <label for="nameInput">Your name</label> 
          <input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required> 
        </div> 

        <div class="form-group animated fadeIn"> 
         <label for="companyInput">Company</label> 
         <input type="company" name="company" class="form-control" id="companyInput" placeholder="Company" required> 
        </div> 

        <div class="form-group animated fadeIn"> 
         <label for="posInput">Position</label> 
         <input type="position" name="position" class="form-control" id="posInput" placeholder="Position/Job Title"> 
        </div> 

        <div class="form-group animated fadeIn"> 
         <label for="contactInput">Contact Number</label> 
         <input type="number" name="contact" class="form-control" id="contactInput" placeholder="Office/Mobile Number" data-error="Please enter a valid mobile number" required> 
         <i class="form-control-feedback glyphicon glyphicon-ok" data-fv-icon-for="number" style="display: block;"></i> 
        </div> 

        <div class="form-group animated fadeIn"> 
         <label for="emailInput">Email</label> 
         <input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address"> 
        </div> 

        <div id="genderChose" class="form-group animated fadeIn"> 
        <label for="genderInput">Gender</label> 
        <div class="radio"> 
         <label> 
         <input type="radio" name="optionsRadios" id="maleOption" value="Male" checked> 
         Male 
         </label> 
        </div> 

        <div class="radio"> 
         <label> 
         <input type="radio" name="optionsRadios" id="femaleOption" value="Female"> 
         Female 
         </label> 
        </div> 
        </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button id="editContact" type="button" class="btn btn-primary">Save</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Sie müssen die Spaltenbreite des Etiketts und dem Eingang setzen. http://getbootstrap.com/css/#forms-horizontal

Also für Ihre erste Form Gruppe:

<div class="form-group animated fadeIn"> 
    <label for="nameInput" class="col-sm-2 control-label">Your name</label> 
    <div class="col-sm-10"> 
     <input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required> 
    </div> 
</div> 

Sie benötigen .col-*-* Breite und .control-label auf dem Etikett und einen div die <input> mit einer .col-*-* Breite umgeben.

Answer 2

versuchen, diese Art von Code für die Formularelemente:

<div class="form-group animated fadeIn"> 
    <label for="nameInput" class='col-sm-5'>Your name</label> 
    <div class='col-sm-7'> 
     <input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required> 
    </div> 
</div>