Bootstrap 4：Navbar Nav项目下划线

问题描述 投票：0回答：1

这里是fixed navbar 4.1的获取启动程序示例的代码，但是从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实体＃555仍然存在。如果我在品牌名称和第一个nav-item之间添加页边距，则将导航栏折叠并显示菜单，然后更改为扩展的导航栏，即在品牌名称和所有菜单顶部之间设置的填充/边距项目。

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

感谢任何帮助。

更新：

非常抱歉，我错过了断断续续的部分。我正在按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品牌的想法不好，但这就是我对您的想法所做的工作：

@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个回答
1
投票

几件事：

  • 如果只需要垂直方向（汉堡菜单），则添加媒体查询
  • 不要在第一项中添加margin-top，而应在品牌中添加margin-bottom
  • 不稳定的行为在我的代码中不可见

<< [snippet下面：

@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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.