如何解决Bootstrap Dropdown出现在其他元素后面
我有一个混合使用手风琴和下拉菜单的模板,问题是下拉菜单出现在下一张问题卡的后面,或者是相同的东西,出现在您的卡片中,而看不到。
template.html:
<div class="card-body">
<!-- Acordion -->
<div class="accordion" id="dlns_faqs_acordion">
{% for element in elements %}
<div class="card">
<div class="card-header dlns_faqs_acordion_heading" id="dlns_faqs_acordion_heading_{{ forloop.counter0 }}">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#dlns_faqs_acordion_content_{{ forloop.counter0 }}" aria-expanded="false" aria-controls="dlns_faqs_acordion_content_{{ forloop.counter0 }}">
{{ element.question }}
</button>
</h2>
<!-- Options -->
<div class="dropdown">
<button class="btn dlns_elements_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-ellipsis-h"></span>
</button>
<div class="dropdown-menu dropdown-menu-right text-center" arial-labelledby="option_button">
...
<a>...</a>
...
</div>
</div>
</div>
<div id="dlns_faqs_acordion_content_{{ forloop.counter0 }}" class="dlns_faqs_acordion_content collapse" aria-labelledby="dlns_faqs_acordion_heading_{{ forloop.counter0 }}" data-parent="#dlns_faqs_acordion">
<div class="card-body">
{{ element.answer }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
style.css:
.dlns_faqs_acordion {
border: none;
}
.dlns_faqs_acordion_heading {
border: none;
background: transparent;
display: flex;
flex-wrap: Nowrap;
justify-content: flex-start;
align-items: center;
flex-direction: row;
align-content: space-between;
}
.dlns_faqs_acordion_heading button {
color: var(--dlns_color_primary) !important;
}
.dlns_faqs_acordion_heading button.collapsed {
color: black !important;
}
.dlns_faqs_acordion_heading button:hover {
text-decoration: none;
}
.dlns_faqs_acordion_content {
color: var(--dlns_color_tertiary);
}
这里有些图片有问题:
还有小提琴:
https://jsfiddle.net/albertosanmartinmartinez/o287rysk/12/
有人云帮助我吗? 预先感谢。
解决方法
由于您没有创建小提琴或plnkr,因此我只能提供一些建议:
- 手动将下拉菜单框
z-index
调整为一个很大的值,以查看其是否有效。 - 检查剪切下拉菜单的容器,以确保
overflow
属性设置为可见。
更新:
.card {
overflow: visible;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。