Bootstrap下拉列表切断了可滚动容器

Question

我正面临着Bootstrap Drop Down的问题。我的下拉列表位于具有修复高度的可滚动div内。

当我点击下拉列表时，滚动内容后面会出现菜单。正常select工作正常。

这是Fiddle，它展示了我面临的问题。

我尝试将position: fixed应用于.dropdown-menu课程，但这也无效。

有没有使用JQuery的工作？

Answer 1

由于下拉列表中包含CSS position: absolute，因此它位于具有CSS position: relative的容器下。 因此，使用z-index很难（但可能）解决方案。

但是，使用position: fixed并正确计算其父top offset值，可以很容易地找到解决方案。

$('.btn-group .dropdown-toggle').click(function(){
    var topPos = $(this).offset().top + $(this).outerHeight();
    $(this).siblings('.dropdown-menu').css({'position':'fixed', 'top':topPos, 'left':'auto'});
})

查看修改后的JSFiddle。

Soution 2-（如果您可以编辑源代码的HTML）

最简单的方法是修改源HTML，如下所示

<select class="form-control">
    <option selected>Default</option>
    <option>1</option>
    <option>2</option>
</select>

检查this example

Answer 2

您正在使用bootstrap下拉列表。 你需要的是bootstrap select。

<div class="form-group">
  <select class="form-control" id="xyz">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Answer 3

你好兄弟作为samir bhosle提到了如何使用select但是我的问题是你想要把什么样的css放在不用于bootstrap的选项上，而我尝试了一些可以帮助你检查这个小提琴的{{3} }

    <select type="button" class="btn btn-default">
       <option class="text-success">1</option>
       <option class="text-danger">2</option>
       <option class="text-primary">3</option>
       <option>4</option>
       <option>5</option>
       <option>6</option>
       <option>7</option>
     </select><br>

这就是我所做的和它的工作正常