jquery - Bootstrap 4下拉列表在具有溢出X自动父级的父级中

Question

我正在使用Boostrap 4的网页上有特定部分，例如以下内容

.parent {
  overflow-x :auto;
  width: 200px;
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="parent">

  <div class="dropdown">
    <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Group Communications &amp; Social Responsiblity Unit<i class="icon-chevron-down"></i></button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</div>

类别为 parent的元素具有 overflow-x:auto;

受影响的下拉菜单，不显示菜单项

Answer 1

在下拉列表中使用position-absolute类，并将显示属性设置为“静态”（data-display="static"）...

<div class="parent">
    <div class="dropdown position-absolute">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">Group Communications &amp; Social Responsiblity Unit<i class="icon-chevron-down"></i></button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
</div>

https://www.codeply.com/go/X8EHuDNMtc