Bootstrap3 - 12.固定在顶部或者底部的导航栏
2018-01-03 本文已影响28人
廖马儿
固定在顶部:navbar-fixed-top
固定在底部:navbar-fixed-bottom
在页面顶部:navbar-static-top
会跟着滚动而滚动,不会固定在screen。
eg:
<nav class="navbar navbar-inverse navbar-fixed-top">
<nav class="navbar navbar-inverse navbar-fixed-top">
<a href="#" class="navbar-brand">www.<strong>google</strong>.com</a>
<ul class="nav navbar-nav">
<li class="active"><a href="">课程</a></li>
<li><a href="">博客</a></li>
<li><a href="">手册</a></li>
</ul>
</nav>
<div class="container">
<div>
<h1>title</h1>
<p>按时打算杀对方的方式斯蒂芬斯蒂芬按时打算</p>
</div>
</div>
我们在浏览器上面:
图片.png
看到的问题就是:
Navbar挡住了我们的container容器。
我们需要在自己的自定义css文件中写样式:
body {
padding-top: 52px; # 我们在样式调节上看到的navbar的高度是52px
}
效果:
图片.png
navbar底部的话:
<nav class="navbar navbar-inverse navbar-fixed-bottom">
效果:
图片.png
代码:
navbar-static-top
效果:
图片.png