Bootstrap 4 固定顶部导航栏显示折叠并隐藏内容 [英] Bootstrap 4 Fixed top navbar shows collapsed and hides content
问题描述
我已经在
这是我得到的固定导航栏图像我不知道我在这方面缺少什么.这是代码
</nav>
对此有什么帮助吗?
需要使用navbar-expand
类来使导航栏显示,否则会折叠(因为移动是默认状态).
https://www.codeply.com/go/HQbDGFwvxp
<nav class="navbar fixed-top navbar-expand navbar-light bg-light"><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item-active"><a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#/product">产品</a><li class="nav-item"><a class="nav-link" href="#/services">服务</a><li class="nav-item"><a class="nav-link" href="#/career">Career</a><li class="nav-item"><a class="nav-link" href="#/contact">联系我们</a>
</nav>
如果您不打算使用移动可折叠菜单,只需删除导航栏折叠...
<nav class="navbar fixed-top navbar-expand navbar-light bg-light"><ul class="navbar-nav"><li class="nav-item-active"><a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#/product">产品</a><li class="nav-item"><a class="nav-link" href="#/services">服务</a><li class="nav-item"><a class="nav-link" href="#/career">Career</a><li class="nav-item"><a class="nav-link" href="#/contact">联系我们</a></nav>
类似问题
引导导航栏列表项/链接未显示
在引导程序 4 中禁用响应式导航栏
注意:当使用 fixed-top
导航栏时,Bootstrap 建议在正文顶部添加填充以防止内容被导航栏隐藏..
body {填充顶部:56px;}
I have already tried lot of threads on SO and also this one but couldn't get it done. I am trying to make one fixed navbar on top with bootstrap 4. But looks like the navbar is shifting towards top. I have tried by adding padding in css
as suggested by official doc also but the content is shifting not the fixed navabar.
Here is the default navbar image
And this is the fixed navbar image I am getting I don't know what I am missing in this. Here is the code
<nav class="navbar fixed-top navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
Any help on this ?
You need to use the navbar-expand
class to make the navbar show, otherwise it will be collapsed (since mobile is the default state).
https://www.codeply.com/go/HQbDGFwvxp
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
If you don't intent to use the mobile collapsible menu, just remove the navbar-collapse...
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<ul class="navbar-nav">
<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="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
</ul>
</nav>
Similar questions
Bootstrap Navbar list items/links not showing
Disable responsive navbar in bootstrap 4
Note: When using the fixed-top
Navbar, Bootstrap recommends adding padding to the top of the body to prevent content from being hidden by the Navbar..
body {
padding-top: 56px;
}
这篇关于Bootstrap 4 固定顶部导航栏显示折叠并隐藏内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!