css - Bootstrap - 下拉菜单为父 DIV 创建滚动条

Question

当 Bootstrap 下拉菜单放置在底部时，它会为父 div 创建滚动条。有谁知道如何修理它？

jsFiddle为此。

在课堂上设置overflow: hiddenOr很容易。但我需要滚动条，因为我会动态地向该 div 添加内容。那时它需要滚动条。即使我有滚动条下拉被推到底部。下拉菜单不能漂浮在滚动条上或者当底部没有足够的空间时我可以向上打开吗？overflow: visiblebs-example

Answer 1

你必须使用溢出：继承；而不是自动。

http://jsfiddle.net/gildonei/xMddf/1131/

.bs-example
{
    margin: 30px;
    height: 100px;
    border: 1px solid #F00;
    overflow: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="bs-example">
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>

Answer 2

像这样

演示

css

.bs-example
{
    margin: 30px;
   height: 100px;
    overflow: hidden;
}

演示1

css

.bs-example
{
    margin: 30px;
   min-height: 400px;
    overflow: auto;
}

Answer 3

修复了不眠之夜的问题。

在新选项卡中打开图像，因为我无法在 stakoverflow 上上传 JSFiddle