Bootstrap 4: Navbar Nav Items 下划线

Question

这是来自 Bootstrap fixed navbar 4.1 but have installed from nuget is 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>

我试图在导航栏折叠和显示（垂直）时给项目添加下划线（border-bottom: 1px solid #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;
}

}

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

Answer 1

一些事情：

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

下面的片段：

@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>

Bootstrap 4: Navbar Nav Items 下划线

Bootstrap 4: Navbar Nav Items Underline

css

nav

bootstrap-4