Question

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

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

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

Answer 1

使用popper.js动态完成Bootstrap 4中的下拉放置，这在诸如手风琴之类的其他元素内部可能是个问题。您可以使用某些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>

相关：
Bootstrap 4 Dropdown - Disable auto placement caused by popper.js
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?

Answer 2

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

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

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

手风琴中的Bootstrap 4下拉菜单

2 个答案: