- 首页
- 前端开发
- 如何使用引导程序 4 将导航栏放置在粘性导航栏下方?
如何使用引导程序 4 将导航栏放置在粘性导航栏下方?
[英] How to place navbar below sticky navbar using bootstrap 4?
本文介绍了如何使用引导程序 4 将导航栏放置在粘性导航栏下方?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 bootstrap 4 制作一个应用程序，其中我有两个导航栏，并且都需要固定在顶部，其中第二个导航栏需要在滚动时隐藏.
HTML:
导航栏 1:
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-custom-light"><div class="container-fluid"><div class="row w-100"><div class="col-md-2 col-lg-2 col-sm-4 col-xs-4"><a class="navbar-brand" href="#">新项目</a>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-6 d-none d-sm-none d-md-block mt-2"><h4 class="font-weight-600">小说明
<div class="col-3"></div><div class="col-3 mt-3 d-none d-sm-none d-md-block"><ul class="navbar-nav pl-5"><li class="nav-item mr-3"><a class="nav-link" href="#">通知</a><li class="nav-item font-weight-600 mr-3"><a class="nav-link text-capitalize" href="#">你好管理员</a><li class="nav-item font-weight-600 mr-3"><a class="nav-link text-capitalize mr-3" href="#">轮廓</a><li class="nav-item"><a class="nav-link" href="#">搜索</a>
</nav>
导航栏 2:
<nav class="navbar fixed-top navbar-expand-md bg-dark navbar-dark"><!-- 品牌--><a class="navbar-brand" href="#">Navbar</a><!-- 切换器/折叠按钮--><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span><!-- 导航栏链接--><div class="collapse navbar-collapse" id="collapsibleNavbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a>
</nav>
这里的导航栏都需要固定在顶部，我使用了 fixed-top 类..
但截至目前，导航栏彼此重叠.
您可以在链接中看到 https://www.bootply.com/y8EfMpCMc4#重叠发生的地方.
请帮助我在导航栏 1 下方放置一个导航栏 2，其位置是固定的(这也需要响应)，其中导航栏 2 需要单独折叠以用于小型设备，并且需要位于导航栏 1 的右侧navbrand 即新项目的权利.
解决方案
在第一个使用 sticky-top 而不是 fixed-top，并使第二个导航栏静态通过删除 fixed-top.
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-custom-light"></nav><nav class="navbar navbar-expand-md bg-dark navbar-dark"></nav>
演示:https://www.codeply.com/go/vbF0Sch9xc><小时>
相关:
Bootstrap 4 将两个导航栏折叠成一个切换按钮
Bootstrap 4 多个固定顶部导航栏
I am using bootstrap 4 to make an application, in which i have two navbars and both needs to be fixed at top in which the second navbar needs to hide while scrolling.
Html:
Navbar 1:
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-custom-light">
<div class="container-fluid">
<div class="row w-100">
<div class="col-md-2 col-lg-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#">
New Project
</a>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-6 d-none d-sm-none d-md-block mt-2">
<h4 class="font-weight-600">
Little description
</h4>
</div>
<div class="col-3"></div>
<div class="col-3 mt-3 d-none d-sm-none d-md-block">
<ul class="navbar-nav pl-5">
<li class="nav-item mr-3">
<a class="nav-link" href="#">
Notification
</a>
</li>
<li class="nav-item font-weight-600 mr-3">
<a class="nav-link text-capitalize" href="#">
Hello Admin
</a>
</li>
<li class="nav-item font-weight-600 mr-3">
<a class="nav-link text-capitalize mr-3" href="#">
Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
search
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
Navbar 2:
<nav class="navbar fixed-top navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Here both the navbar needs to be fixed top for which i have used fixed-top class..
But as of now the navbars are overlapping each other.
You could see in the link https://www.bootply.com/y8EfMpCMc4# where the overlapping happens.
Kindly help me to place a navbar 2 below navbar 1 with position fixed (which also needs to be responsive), in which the navbar 2 alone needs to be in collapsed for small devices and needs to be on right side of navbar 1's navbrand ie.right to New Project.
解决方案
Use sticky-top on the 1st instead of fixed-top, and make the 2nd navbar static by removing fixed-top.
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-custom-light"></nav>
<nav class="navbar navbar-expand-md bg-dark navbar-dark"></nav>
Demo: https://www.codeply.com/go/vbF0Sch9xc
Related:
Bootstrap 4 collapsing two navbars into one toggle button
Bootstrap 4 Multiple fixed-top navbars
这篇关于如何使用引导程序 4 将导航栏放置在粘性导航栏下方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
