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模态页脚不会粘在模态的底部

回答

相关问题