导航条固定在底部 key:navbar-fixed-bottom container container-fluid - Bootstrap 导航条

导航条固定在底部

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

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

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

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

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

body { padding-bottom: 70px; }

Make sure to include this after the core Bootstrap CSS.

让导航条始终固定到底部

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

  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-bottom" 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>    

 

CTRL + D 收藏本页

学习导航


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