手风琴中的Bootstrap 4下拉菜单

问题描述

我正在使用Bootstrap 4和手风琴面板，在这些面板中，我有表格和一些带有下拉菜单的输入.从我提供的摘录中，您可以看到下拉菜单没有显示在顶部(在另一手风琴上方)，而是显示在手风琴内.

I am using Bootstrap 4 and accordion panels, within those panels i have tables and some inputs with dropdown menu's. From the snippet i have provided you can see that the dropdown doesn't show on top (over the other accordion) and just shows within the accordion.

有人知道解决这个问题的方法吗?

Does anyone know a way around this?

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseExample">
			        Accordion Dropdown Example
			      </a>
  </div>
  <div id="collapseExample" class="collapse" data-parent="#accordion">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Input with dropdown example</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="input-group">
                  <input name="inputwithdropdown" type="text" class="form-control">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Menu1</a>
                      <a class="dropdown-item" href="#">Menu2</a>
                      <a class="dropdown-item" href="#">Menu3</a>
                      <a class="dropdown-item" href="#">Menu4</a>
                      <a class="dropdown-item" href="#">Menu5</a>
                      <a class="dropdown-item" href="#">Menu6</a>
                      <a class="dropdown-item" href="#">Menu7</a>
                      <a class="dropdown-item" href="#">Menu8</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseAnother">
			        Another Accordion Dropdown
			      </a>
  </div>
  <div id="collapseAnother" class="collapse" data-parent="#accordion">
    <div class="card-body">
      <div class="col-3">
        This is just another dropdown accrodion
      </div>
    </div>
  </div>
</div>

推荐答案

为可能来自Google的同一问题的人解答.

Answering for people who might come from Google with the same issue.

我从一名贡献者那里收到了有关Bootstrap Git的答复，并向我指出，这不是引起此问题的手风琴.这是<div class="table-responsive">包装器和overflow-x: auto.设置为visible可以纠正此问题，但显然会破坏桌子上的响应式滚动.

I got a reply on the Bootstrap Git from a contributor and it was pointed out to me that it wasn't the accordion causing this. It's the <div class="table-responsive"> wrapper and the overflow-x: auto. Making this visible corrects this but obviously breaks the responsive scroll on the table.

在这种情况下，目前还没有真正的解决方法，在这种情况下，手风琴中有一个带有下拉菜单的表格.

Currently there is no true fix in this situation, where you have a table within an accordion with dropdown menu's.

这篇关于手风琴中的Bootstrap 4下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！