Question

在下面的html中，我在一行中有一个下拉菜单。行高是3.7rem。当我单击下拉列表时，由于行高不够大，列表项将不可见。它们隐藏在行后面。我给下拉列表z-index：1，但这并不能解决问题。

<div class="row nav-bar bg-secondary-blue mt-2" style="height: 3.7rem;">
<div class="col">
    <ul class="nav nav-tabs">
        <li class="dropdown offset-2">
            <a data-toggle="dropdown" aria-expanded="false" href="#" 
                class="dropdown-toggle nav-link dropdown-toggle dropbtn w-15 mt-1">
                Departments
            </a>
            <div role="menu" class="dropdown-menu" style="z-index:1;">
                <a role="presentation" href="#" class="dropdown-item c-black">
                    First Item
                </a>
                <a role="presentation" href="#" class="dropdown-item">
                    Second Item
                </a>
                <a role="presentation" href="#" class="dropdown-item">
                    Third Item
                </a>
            </div>
        </li>
    </ul>
</div>

Answer 1

我想我知道您的问题可能是什么。我仅使用Bootstrap CSS文件尝试了您的代码，然后按照您所说的复制了问题，并按行截断了下拉列表。因此，我随后添加了Bootstrap JS文件，并且下拉列表工作正常。您是否包含了Bootstrap JS文件？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row nav-bar bg-secondary-blue mt-2" style="height: 3.7rem;">
    <div class="col">
      <ul class="nav nav-tabs">
        <li class="dropdown offset-2">
          <a data-toggle="dropdown" aria-expanded="false" href="#" class="dropdown-toggle nav-link dropdown-toggle dropbtn w-15 mt-1">
                Departments
            </a>
          <div role="menu" class="dropdown-menu" style="z-index:1;">
            <a role="presentation" href="#" class="dropdown-item c-black">
                    First Item
                </a>
            <a role="presentation" href="#" class="dropdown-item">
                    Second Item
                </a>
            <a role="presentation" href="#" class="dropdown-item">
                    Third Item
                </a>
          </div>
        </li>
      </ul>
    </div>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

如何使下拉列表项显示在包含它们的行的顶部？

1 个答案: