Css 引导下拉隐藏在模态中

您好，我正在尝试获得一个引导下拉列表来显示模型中的列表。我想我要说的是，当我单击下拉列表时，它会展开，但如果列表比模型长，它会切断列表的其余部分，导致用户无法选择所有选项

我一直在谷歌上搜索这篇文章，看到了这篇与我的文章非常相似的文章。然而，他们说设置

溢出：可见，允许显示下拉列表。我的问题是，当我设置它时，表扩展到了模态之外

现在，我的问题是：我是否只能在下拉列表中显示溢出，而不能在表中显示

在这里不发布大量代码，这就是html和css的样子：
HTML:

<div class="my-grid">
  <table class="table table-responsive">
    <thead><tr><th>Choose One</th></tr></thead>
    <tbody>
      <tr>
        <td>
          <div class="dropdown">
              <button class="form-control btn btn-default btn-toggle" data-toggle="dropdown" id="dropDownControl" type="button">
                <div class="show-text">a</div>
                <span>Some Chosen Value here</span>
              </button>
              <ul aria-labelledby="dropDownControl" class="dropdown-menu">
                <li><a>a</a></li>
                <li><a>a</a></li>
                <li><a>a</a></li>
                <li><a>a</a></li>
              </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

您遇到与中相同的问题：。接受的答案将使下拉列表显示在容器外部，因此溢出不再重要

进一步的障碍可能是，现在下拉列表根本不会显示，因为它位于模态对话框后面

在这种情况下，请更改html以显式设置z索引（或在事件脚本中处理）：



如果您使用的是AngularJS，您可以使用uib引导和uib下拉控件自动附加到body（带有“dropdown append to body”属性），但您仍然需要显式处理z索引。
我实际上使用的是angular 4，是否有预建控件？是的，这是相同工作的一部分，但不同的repo：（使用引导程序4而不是3作为基础）。我自己还没有使用过它。
.my-grid{
  overflow:auto;
  height:300px;
}

    <ul aria-labelledby="dropDownControl" class="dropdown-menu" style="z-index:1000;">