Bootstrap选项卡中的下拉菜单将被切断

Question

我使用带有选项卡的引导模式。这些选项卡中的一个是带有下拉列表的表单。最后一个下拉菜单被部分隐藏。我想这与溢出有关，但我无法弄清楚将其应用于哪个div。

我可以为内容div设置高度，但这会导致内容末尾有很大的空白。

是否有解决此问题的方法（下拉列表已充分显示）？也许在jQuery中添加一个css样式？

原样：

应为

Answer 1

因此，我试图重制您可能将overflow设置为tab-pane element。

#tab1 {
    /* overflow-y: hidden; */
}

#tab2 {
    overflow-y: hidden;
}

.tab-pane {
    background-color:#eee;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12 p-3">
      <ul id="my-tab" class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="home" aria-selected="true">Tab1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-controls="home" aria-selected="true">Tab2</a>
          </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade show active p-3" id="tab1" role="tabpanel" aria-labelledby="tab1">
          <div class="dropdown show">
            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </div>
        <div class="tab-pane fade p-3" id="tab2" role="tabpanel" aria-labelledby="tab2">
          <div class="dropdown show">
            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>