拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 当我打开溢位切换器时,导航栏项目不会保持固定

当我打开溢位切换器时,导航栏项目不会保持固定

白鹭 - 2022-03-25 2454 0 0

前言 - 我不是在问“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;;
}
标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *