twitter-bootstrap - Bootstrap Modal - 自动高度

Question

我正在使用引导程序的模型插件。如您所见，一些下拉项目位于底部栏下方。

如何在这种情况下设置模态的高度以使所有下拉项可见并摆脱该滚动条？

Answer 1

只需添加这两个规则（!important这里只是因为 SO 片段，你不需要它）：

.modal { overflow: visible !important; }
.modal-body { overflow-y: visible !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
 
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <div class="dropdown">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li><a href="#">Foo</a></li>
          <li><a href="#">Bar</a></li>
          <li><a href="#">Baz</a></li>
          <li><a href="#">Foo</a></li>
          <li><a href="#">Bar</a></li>
          <li><a href="#">Baz</a></li>
      </ul>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Answer 2

您只需添加一个z-index具有高于模型框页脚的属性的类。

要使 z-index 起作用，您还必须设置 position = relative、absolute 或 fixed。也将 z-index 设置为 5000 可能会有所帮助。（模态的 z 指数可能高于 2000 年的。

所以在你的CSS中我会添加这个：

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}

.modal-body 类有一个 overflow-y: auto 属性。您可能需要将其更改为：

.modal-body {
    overflow-y:visible;
}