引导选择下拉菜单不能跟随父级答案

【问题标题】：bootstrap select dropdown can't follow the parent引导选择下拉菜单不能跟随父级
【发布时间】：2018-08-14 09:36:50
【问题描述】：

我使用 bootstrap-select 选择器来选择选择器选项。当我滚动容器时，带有顶部栏的下拉结构。它没有正确跟随父元素。

请检查codepen：https://codepen.io/Arunkarthik07/pen/bjOLYV

    .container{ 
      height: auto;
      overflow-y: scroll;
    }

    <div>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
    <div class="container">
     
    <select class="selectpicker">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Barbecue</option>
        <option>Mustard</option>
      <option>Ketchup</option>
      <option>Barbecue</option>
    </select>  
          
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
     
    </div>
    </div>
    </div>

【问题讨论】：

标签： jquery html css bootstrap-selectpicker

【解决方案1】：

我没有清楚地明白你的问题。如果您的下拉菜单卡在正文的顶部，则表示您的下拉菜单中存在 x-out-of-boundaries。请利用该类移除变换，使其可以跟随父元素

//fix
dropdown-menu[x-out-of-boundaries]{
   transform: translate3d(0px, 30px, 0px) !important; //give valid transform
//or use visiblity hidden;
}

【讨论】：

【解决方案2】：

那是因为你限制了下拉容器的高度。因此，内容将被强制滚动。

将下拉代码更改为：

<select class="selectpicker" data-container="body">
  ...
</select>

这是您的代码的有效 sn-p：https://codepen.io/anon/pen/wxZrZb。

【讨论】：

更优雅的答案
投反对票的原因是什么？答案按预期工作，这是解决此问题的正确方法。

【解决方案3】：

删除您的 overflow-y: scroll; 样式的容器

【讨论】：