前言 - 我不是在问“navbar-fixed-top”

我正在尝试使用自定义高度制作简单的导航栏。

HTML 代码：

<nav class="navbar navbar-expand-md">
    <div class="container-fluid nav-bar">
      <a class="navbar-brand" href="#">Navbar</a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon">H</span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ms-auto">
            <a class="nav-link" href="#">HOME</a>
            <a class="nav-link" href="#">DESTINATIONS</a>
            <a class="nav-link" href="#">CREW</a>
            <a class="nav-link" href="#">TECHNOLOGIES</a>
          </div>
        </div>
      
    </div>
  </nav>

CSS 代码：

.navbar {
  background-color: orange;
  height: 72px !important;
}

a {
  color: #000;
}

这是 Codeply 链接：https ://www.codeply.com/p/mBsxyw02Q3

打开溢位选单（或 Bootstrap 语言中的切换器）时，“导航品牌”以及导航栏中的其他元素会向上移动以显示隐藏的元素。

关于我的一些事情——我刚开始 Web Dev，所以我只知道一些关于 HTML 和 CSS 的事情。我知道这里的问题可能是由于脚本而发生的，但我不确定。所以让我知道这个问题是否可以用 CSS 以及如何纠正。如果不是，它与javascript有关吗？

当我打开汉堡选单时，我已经检查了页面的填充或边距是否有任何变化，但是没有任何变化，所以我有点不知道这里可能发生了什么。

uj5u.com热心网友回复：

您需要添加几行代码来解决此问题。

.navigation {
    background-color: orange;
    min-height: 72px !important;
}
.navbar-brand {
    min-height: 55px;
    line-height: 48px;;
}