手风琴内的 Bootstrap 4 下拉菜单答案

【问题标题】：Bootstrap 4 dropdown menu within accordion手风琴内的 Bootstrap 4 下拉菜单
【发布时间】：2019-01-16 20:11:43
【问题描述】：

我正在使用 Bootstrap 4 和手风琴面板，在这些面板中我有表格和一些带有下拉菜单的输入。从我提供的 sn-p 中，您可以看到下拉菜单没有显示在顶部（在另一个手风琴上），而只是显示在手风琴内。

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

<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>

【问题讨论】：

标签： drop-down-menu bootstrap-4 dropdown

【解决方案1】：

Bootstrap 4 中的下拉放置是使用popper.js 动态完成的，这在手风琴等其他元素中可能是一个问题。您可以使用某些options explained here 来控制下拉位置。

在这种情况下，在下拉列表中使用 data-boundary="parent" data-flip="false" 和 dropdown-menu-right 似乎效果最好。

https://www.codeply.com/go/YC9Fj7eMKb

<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" data-boundary="parent" data-flip="false" aria-haspopup="true" aria-expanded="false"></button>
        <div class="dropdown-menu dropdown-menu-right">
            <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>

【讨论】：

我将研究 popper 选项...从您的示例中，我不确定您是否理解.. 我希望下拉菜单出现在手风琴上方而不是其中。最重要的是。

【解决方案2】：

为可能来自 Google 的人提供相同问题的解答。

我从贡献者那里收到了关于 Bootstrap Git 的回复，有人向我指出这不是手风琴造成的。它是<div class="table-responsive"> 包装器和overflow-x: auto。制作这个visible 可以纠正这个问题，但显然会破坏桌面上的响应滚动。

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

【讨论】：