时间戳

首页 > 解决方案 > 手风琴内的引导下拉菜单

css - 手风琴内的引导下拉菜单

问题描述

我有一个手风琴，它有一个标题，我需要在其中放置一个下拉菜单。我试过摆弄 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>

标签： csstwitter-bootstrapdrop-down-menubootstrap-4

解决方案

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

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

推荐阅读