css - Bootstrap - ドロップダウンはスクロールバーを親 DIV に作成します

Question

Bootstrap ドロップダウンは、下部に配置されたときに親 div にスクロールバーを作成します。誰もそれを修正する方法を知っていますか?

このためのjsFiddle。

overflow: hiddenOroverflow: visibleをbs-exampleクラスに設定するのは簡単です。しかし、その div にコンテンツを動的に追加するため、スクロールバーが必要です。その際、スクロールバーが必要です。私はスクロールバーのドロップダウンを持っていますが、一番下まで押し下げられています。ドロップダウンがスクロールバーの上に浮かない、または下に十分なスペースがない場合に上に開くことはできますか?

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

眠れない夜の問題を修正しました。

stakoverflow で JSFiddle をアップロードできなかったため、新しいタブで画像を開きます

Answer 3

このような

デモ

CSS

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

デモ1

CSS

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