bootstrap modal form-inline將不會「inline」按鈕

Question

我真的被這個問題困住了。創建下一個模態.FORM內聯，但取消按鈕保持了內聯的，這是代碼：

<div id="loginModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Login </h4> 
     </div> 
     <div class="modal-body"> 

      <div class="form-inline"> 

       <div class="form-group"> 
       <label class="sr-only" for="email">Email Address</label> 
       <input type="email" class="form-control-input-sm text-center" placeholder="Email"> 
      </div> 
      <div class="form-group"> 
       <label class="sr-only" for="password">Password</label> 
       <input type="password" class="form-control-input-sm text-center" placeholder="Password"> 
      </div> 
       <input type="checkbox"><span style="color:#9d9797">Remember me</span> 

       <button type="submit" class="btn btn-info">Sign In</button> 
       <button type="button" class="btn btn-default btn-sm" 
        data-dismiss="modal">Cancel</button> 
      </div>    
     </div> 
    </div> 
    </div> 
</div> 

它的畫面：

Answer 1

默認的輸入最大寬度是280像素，可以定義一個類來減少它，如

<style> 
    .input-short { 
     max-width: 130px !important; 
    } 
</style> 

然後將其應用到輸入文本框

<input type="email" class="form-control input-short" id="email" placeholder="Email"> 

這應該給你你想要的（相應地調整最大寬度）。