Bootstrap Modal - 自动高度

Question

我正在使用bootstap的Model插件。正如您所看到的，一些下拉项目位于底栏下方。

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

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;
}