ブートストラップ.form水平行が正しく表示されない

Question

次のようなモーダルがあり、横形を表示するはずですが、図のように正しく表示されません。 .form-horizo​​ntalは、各入力が行の右側に表示されるようにする必要がありますか？助けをよろしく！

<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

あなたはラベルの列幅と入力を設定する必要があります。 http://getbootstrap.com/css/#forms-horizontal

だからあなたの最初のフォームグループのために：

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

あなたは.col-*-*幅とラベルに.control-labelと.col-*-*幅で<input>を囲むdiv要素を必要としています。

Answer 2

フォーム要素のためのこの種のコードを試してみてください。

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