Bootstrap .form水平行不能正確顯示

我有以下應該顯示水平窗體的模式，但是，它不正確顯示如圖所示。 .form-horizontal應該讓每個輸入都以右邊的行顯示？感謝任何幫助！Bootstrap .form水平行不能正確顯示

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

來源

2017-03-12 Kayden

您需要設置標籤和輸入的列寬。 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。

來源

2017-03-12 12:05:08 DrevanTonder

嘗試這種類型的代碼爲你的表單元素：

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

來源

2017-03-12 12:03:59

Bootstrap .form水平行不能正確顯示

回答

相關問題