Bootstrap Dropdown 出现在其他元素的后面

Question

我有一个混合了引导手风琴和下拉菜单的模板，问题是下拉菜单出现在下一个问题卡的后面，或者是相同的问题，在你的卡内并且看不到。

模板.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/

有人云帮助我吗？ 提前致谢。

Answer 1

由于您没有创建 fiddle 或 plnkr，我只能提供一些建议：

• 手动将下拉菜单框z-index 调整到一个很大的值，看看是否有效。
• 检查剪切下拉菜单的容器，确保 overflow 属性设置为可见。

更新：

.card {
  overflow: visible;
}

https://jsfiddle.net/65fq347r/