文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap modal页脚不会粘在modal的底部

问Bootstrap modal页脚不会粘在modal的底部
EN

Stack Overflow用户

提问于 2014-12-04 18:21:13

回答 1查看 11K关注 0票数 5

我有一个带水平表单的bootstrap模型，它目前有height: 80vh;。我想要的模式是这么大，我很高兴。

问题是modal-footer运行不正常。它不是停留在底部，而是占据了本应属于输入字段的大部分空间：

我想迫使modal-footer留在底部，但即使在阅读了其他讨论并尝试使用padding: 0;之后，我也无法修复它。以下是我使用的代码的一部分。我删除了一些输入字段以使其更易于阅读。

我怎样才能修复这个顽固的脚注？

$(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="bootstrap-css@*" 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>

jquery

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-12-04 18:55:43

您应该在.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>

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27291489

复制

相似问题

问Bootstrap modal页脚不会粘在modal的底部
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap modal页脚不会粘在modal的底部EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap modal页脚不会粘在modal的底部
EN