Question

我有一个水平形式的bootstrap模型，它目前有height: 80vh;。我希望模态这么大，我很高兴。

问题是modal-footer行为不正确。它不是粘在底部，而是占据了应该属于输入字段的大部分空间：

enter image description here

我想强制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>

Answer 1

您应该在.row中添加.modal-body课程，并将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>

Bootstrap模态页脚不会粘在模态的底部

1 个答案: