导航条固定在顶部 key:navbar-fixed-top container container-fluid - Bootstrap 导航条

导航条固定在顶部

W3CSchool > bootstrap3中文手册 > Bootstrap 导航条 > 导航条固定在顶部

添加 .navbar-fixed-top 类可以让导航条固定在顶部,还可包含一个 .container.container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

需要为 body 元素设置内补(padding)

这个固定的导航条会遮住页面上的其它内容,除非你给 <body> 元素底部设置了 padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是 50px。

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

让导航条始终固定到顶部

Bootstrap 导航栏可以动态定位。默认情况下,它是块级元素,它是基于在 HTML 中放置的位置定位的。通过一些帮助器类,您可以把它放置在页面的顶部或者底部,或者您可以让它成为随着页面一起滚动的静态导航栏。

如果您想要让导航栏固定在页面的顶部,请向 .navbar class 添加 class .navbar-fixed-top。下面的实例演示了这点:

为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 <body> 标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.    <title>Bootstrap 实例 - 导航条始终固定在顶部</title>   
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   
  6.    <script src="/scripts/jquery.min.js"></script>   
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>   
  8. </head>   
  9. <body>   
  10.    
  11. <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
  12.     <div class="container-fluid"> 
  13.     <div class="navbar-header"> 
  14.         <a class="navbar-brand" href="#">bootstrap教程</a> 
  15.     </div> 
  16.     <div> 
  17.         <ul class="nav navbar-nav"> 
  18.             <li class="active"><a href="#">iOS</a></li> 
  19.             <li><a href="#">SVN</a></li> 
  20.             <li class="dropdown"> 
  21.                 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  22.                     Java <b class="caret"></b> 
  23.                 </a> 
  24.                 <ul class="dropdown-menu"> 
  25.                     <li><a href="#">jmeter</a></li> 
  26.                     <li><a href="#">EJB</a></li> 
  27.                     <li><a href="#">Jasper Report</a></li> 
  28.                     <li class="divider"></li> 
  29.                     <li><a href="#">分离的链接</a></li> 
  30.                     <li class="divider"></li> 
  31.                     <li><a href="#">另一个分离的链接</a></li> 
  32.                 </ul> 
  33.             </li> 
  34.         </ul> 
  35.     </div> 
  36.     </div> 
  37. </nav> 
  38.    
  39. </body>   
  40. </html>   

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)