Bootstrap 4：导航栏导航项目下划线答案

【问题标题】：Bootstrap 4: Navbar Nav Items UnderlineBootstrap 4：导航栏导航项目下划线
【发布时间】：2020-09-26 17:55:52
【问题描述】：

这是来自 fixed navbar 4.1 的 Get Bootstrap 示例中的代码，但从 nuget 安装的是 Bootstrap 4.5 和 JQuery 3.5.1：

    <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Fixed navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

  </div>
</nav>

当导航栏折叠并显示（垂直）时，我尝试在项目下划线（边框底部：1px 实心#555，左侧有 15px 填充），但在导航栏水平展开时不会。

对我来说，还有另一个问题，那就是当导航栏折叠并显示菜单时，将导航栏的大小调整为展开（水平菜单项）。 nav-item border-bottom: 1px solid #555 仍然存在。如果我在品牌名称和第一个导航项之间添加一个边距顶部，让导航栏折叠并显示菜单，然后更改为展开的导航栏，即我在品牌名称和所有菜单顶部之间设置的填充/边距项目。

另外，如果我在品牌名称和第一个垂直菜单项之间添加填充，它会以不稳定的方式打开/关闭，所以我需要找到一种方法来阻止这种不稳定的行为。到目前为止，我发现的只是删除填充。

感谢任何帮助。

更新：

真的很抱歉，因为我错过了波涛汹涌的部分。我正在按照this 页面使用缩小，并在缩小的导航栏到正常导航栏之间转换。导航栏似乎很流畅，但标志却不是。这就是我需要做的一切来解决这个问题：

.navbar-brand { transition: all, 0.5s ease; }
.shrink .navbar-brand { transition: all, 0.5s ease; }
.navbar-brand img { transition: all, 0.5s ease; }
.shrink .navbar-brand img { transition: all, 0.5s ease; }

我创建了一个 SASS Mixin 来处理整个项目的过渡，它添加了 webkit、moz 和 o 的过渡以及正常的过渡。它类似于this 之一（参见转换）。

你的想法太棒了，我什至从没想过媒体查询。您对 navbar-brand 的想法并不好，但这就是我对您的想法所做的事情：

@media screen and (max-width: 991.88px) {
.navbar-nav .nav-link {
    padding-left: 15px
}

.navbar-nav .nav-item {
    border-bottom: 1px solid #555;
}

.shrink .navbar-nav {
    margin-top: 10px;
}

.shrink .navbar-nav .nav-link {
    margin: 8px 0;
    padding-bottom: 11px;
}

}

非常感谢您抽出宝贵的时间，只要本网站允许，我会将您的回复标记为解决方案。非常感谢！！

【问题讨论】：

标签： css bootstrap-4 nav

【解决方案1】：

一些事情：

如果您只需要在垂直（汉堡菜单）中添加媒体查询
不要在第一项添加margin-top，而是在品牌中添加margin-bottom
在我的代码中看不到断断续续的行为

sn-p如下：

@media screen and (max-width:991px) {
  .navbar-nav .nav-link {
    border-bottom: 1px solid #555;
    padding-left: 15px
  }
  .navbar-brand {
    margin-bottom: 30px
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.0/js/bootstrap.min.js"></script>
</head>

<body>


  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Fixed navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>

      </div>
    </nav>

  </div>

【讨论】：