Bootstrap 4.0 下拉菜单未使用导航栏的完整高度答案

【问题标题】：Bootstrap 4.0 dropdown menu not using the full height of the nav barBootstrap 4.0 下拉菜单未使用导航栏的完整高度
【发布时间】：2020-04-28 08:05:57
【问题描述】：

我正在寻求帮助，我对编程有点陌生，我试图用谷歌搜索我的解决方案，但无法弄清楚。我怎样才能让下拉菜单使用导航栏的整个高度？我试图用 CSS 来做，但不能让它工作。我添加了一张图片显示问题。

enter image description here

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>Heima</title>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="static/landing/styles.css">

    .navbar-dark:hover .navbar-nav:hover .nav-link:hover
{
color: #fff;
width: 100%;
}

.bg-color{
background-color: #18191a;
}

.dropdown:hover{
background-color: #2f2f30;
height: 10%;
}

a:hover{
link-color: #fff;
color: #fff;
}

a{
link-color: #fff;
color: grey;
}

.nav-item dropdown
{
width: 100%;
}

</head>

<body>

  <nav class="navbar navbar-expand-sm bg-color navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="#">Logo</a>

      <!-- Dropdown -->
     <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Akfør
        </a>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
        </a>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
        </a>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </nav>

</body>

</html>

【问题讨论】：

您的<li> 应该放在<ul> 元素内，您可能需要通过添加.py-0 类来删除.navbar 的垂直默认填充
我只是尝试过，它删除了几乎所有的间距，但下拉菜单和导航栏的底部/顶部之间仍有一点空间

标签： css drop-down-menu menu navbar dropdown

【解决方案1】：

据我了解，您的问题是导航栏的填充。

尝试将以下内容添加到您的 css 中：

.navbar {
padding: 0px 1rem;
}

或者将以下类添加到您的导航栏：

py-0

这将删除填充，因此下拉阴影将使用导航栏的整个高度。

【讨论】：