css - Accordion 内的 Bootstrap 下拉菜单

Question

我有一个带有标题的 Accordion ，我需要在其中放置一个下拉菜单。我试过摆弄 z-index 认为这是一个堆叠问题但无济于事。我在 https://www.bootply.com/53bH05eQlf 上用最小样本重现了这个问题。

有没有办法让下拉菜单正确显示？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
  <div class="card">
    <div class="card-header">Blah</div>
  </div>
  <div class="card">
    <div class="card-header">Blah</div>
  </div>
  <div class="card">
    <div class="card-header">Blah
    <div class="dropdown text-center show border-info border rounded menu-button float-left">
                <a class="btn p-0 dropdown-toggle" href="#" role="button" id="some-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="fa fa-bars"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="some-dropdown">
                    <li class="dropdown-item"><a href="#">Hidden behind the card!</a></li>
                </ul>
            </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Blah</div>
  </div>
  <div class="card">
    <div class="card-header">Blah</div>
  </div>
</div>

Answer 1

添加style="overflow: visible"到包含下拉列表的卡片 div 将解决问题。

也就是说，对于 bootply示例替换 <div class="card">在第 8 行 <div class="card" style="overflow: visible"> .