Bootstrap模態頁腳不會粘在模態的底部

我有一個水平窗體的引導模型，它目前有height: 80vh;。我希望模態能夠變大，我對此感到滿意。Bootstrap模態頁腳不會粘在模態的底部

問題是modal-footer行爲不正確。相反，堅持底部，它佔據應該屬於輸入字段的空間很大一部分：

enter image description here

我想迫使modal-footer留在底部，但即使讀其他討論後並嘗試與padding: 0;我無法修復它。以下是我使用的部分代碼。我刪除了一些輸入字段以方便閱讀。

我該如何解決stuborn footer？

$(document).ready(function() { 
 
    $("a").click(function() { 
 
    $('.modal').modal({ 
 
     show: true 
 
    }); 
 
    return false; //prevent browser defualt behavior 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> 
 

 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <a href="#" class="btn btn-info btn-lg">Click me !</a> 
 
    
 
    <div class="modal fade in" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> 
 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <h4 class="modal-title" id="myModalLabel">Edit Package MyPackage</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <form class="form-horizontal"> 
 
      <div class="control-group"> 
 
       <label class="control-label">Package Name:</label> 
 
       <div class="controls"> 
 
       <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> 
 
       </div> 
 
      </div> 
 
      <!-- Other fields here --> 
 
      </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary" id="savePackageChangesBtn">Save changes</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2014-12-04 Flame_Phoenix

你可以用你的風格進行演示嗎？ – dfsq 2014-12-04 10:30:48

像一個小提琴？從未使用過，我可以嘗試：S你有什麼建議嗎？ – 2014-12-04 10:45:10

我推薦Plunkr。這裏是你的基地：http://plnkr.co/edit/EUqJqov3HuAzykIbH9fi?p=preview正如你可以看到你的代碼可能缺乏一些特定的CSS樣式，因爲問題不能用你發佈的HTML重現。 – dfsq 2014-12-04 10:48:07

你應該在.modal-body添加.row類，並把form標籤內.col-lg-12類。

檢查一下，我希望這會工作！

<div class="modal fade" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title" id="myModalLabel">Edit Package MyPackageName</h4> 
      </div> 
      <div class="modal-body row"> 
       <div class="col-lg-12" 
       <form class="form-horizontal"> 
        <div class="control-group"> 
         <label class="control-label">Package Name: </label> 
         <div class="controls"> 
          <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> 
         </div> 
        </div> 
        <!-- Other fields here --> 
       </form> 
      </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" id="savePackageChangesBtn" data-url="@Url.Action("EditPackage", "Package")">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div>

來源

2014-12-04 10:55:43

同樣的問題可以通過很多方法解決你能請指定你的問題 – 2017-01-18 07:15:50

Bootstrap模態頁腳不會粘在模態的底部

回答

相關問題