默认情况下，导航条的定位属性为 static，它的位置由它的HTML代码中定义的顺序出现，并随着页面向下滚动而消失。也可以改变它的定位方式，让它固定显示在浏览器窗口的顶部或底部。

1、固定在顶部

如果想让导航条固定在页面顶部，只需在 .navbar 类后面追加一个 .navbar-fixed-top 类即可。如：



  1. <div class="navbar navbar-fixed-top">
    2. 

  2.   ...
    3. 

  3. </div>


效果如图 4‑35所示：


图4-35 Bootstrap导航条固定在顶部


2、固定在底部


要让导航条固定在页面底部，只要把 .navbar-fixed-top 类改为 .navbar-fixed-bottom 类即可。如：




  1. <div class="navbar navbar-fixed-bottom">
    2. 

  2.   ...
    3. 

  3. </div>


效果如图 4‑36所示：


图4-36 Bootstrap导航条固定在底部


需要注意的是，导航条被固定之后，它就可能覆盖其他页面元素。为了防止这种情况发生，需要给给 <body> 元素设置合适的内边距。由于导航条的默认高度是 40px，所以至少要给 <body> 元素添加 40px 的内边距。


导航条固定在顶部的时候，设置如下：




  1. body { padding-top: 40px; }


导航条固定在底部的时候，设置如下：




  1. body { padding-bottom: 40px; }


上述两行代码不必同时设置，只需根据导航条所固定的位置，选择其中一个即可。并且，一定要在Bootstrap的核心CSS（即，bootstrap.css）文件之后，响应式CSS（即，bootstrap-responsive.css）文件之前添加该样式。




												


											
Bootstrap 固定导航条的更多相关文章
	

    
								
  1. Bootstrap系列 -- 43. 固定导航条
		
    很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式:  .navbar-fixed-top:导航条固定 ...
    
		
    2. 
						
  2. Bootstrap学习-导航条-分页导航
		
    1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...
    
		
    3. 
						
  3. Bootstrap之导航条
		
    基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...
    
		
    4. 
						
  4. bootstrap框架 导航条组件使用
		
    本文记载boot 导航条组件使用方法 导航条组件 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展 ...
    
		
    5. 
						
  5. bootstrap－导航条
		
    默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 两端对齐的导航条导航链 ...
    
		
    6. 
						
  6. Bootstrap组件之响应式导航条
		
    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
    
		
    7. 
						
  7. Bootstrap每天必学之导航条
		
    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...
    
		
    8. 
						
  8. bootstrap 组件之"导航条"
		
    一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...
    
		
    9. 
						
  9. 玩转Bootstrap（基础） -- （6.导航条基础）
		
    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Spring整合Shiro
			
    apache shiro 是一个安全认证框架,和 spring security 相比,在于他使用了比较简洁易懂的 认证和授权方式.其提供的 native-session(即把用户认证后的授权信息保存 ...
    
			
    2. 
						
  2. px-pt-dp-rem像素单位的换算问题
			
    px-pt-dp-rem像素单位的换算问题 dp 的意思从 MDPI 到 XXXHDPI 每单位物理尺寸的像素数越来越大.也就是说 mdpi 时 1dp = 1pxxxxhdpi 时 1dp = 4p ...
    
			
    3. 
						
  3. JustOj  2040: 王胖子买零食 （贪心）
			
    题目描述 大豪哥有个好朋友叫王胖子,众所周知王胖子特别爱吃零食,比如各种不一样的糖果,辣条呀,可是王胖子每个月用在买零食上的钱不是固定的,但是因为王胖子特别爱吃零食,他希望把自己能花在买吃的钱全部用掉 ...
    
			
    4. 
						
  4. Java Eclipse和MyEclipse快捷键
			
    摘自:http://www.cnblogs.com/lsy131479/p/8487379.html  首先: 常用快捷键 alt+/ - -  万能快捷键 Ctrl+1 - - 快速修复 Eclip ...
    
			
    5. 
						
  5. Java 线程类的一些常用方法
			
    线程类的一些常用方法: sleep(): 强迫一个线程睡眠N毫秒.  isAlive(): 判断一个线程是否存活.  join(): 等待线程终止.  activeCount(): 程序中活跃的线程数 ...
    
			
    6. 
						
  6. a标签（普通标签如span）没有disabled属性 ，怎样利用js实现该属性
			
    a标签以及其她普通标签没有disabled属性,要想实现类似input框属性disabled可以通过css样式设置pointer-events的值来设定: <!DOCTYPE html>  ...
    
			
    7. 
						
  7. 每日linux命令学习-历史指令查询（history、fc、alias）
			
    linux历史机制对命令行中输入的命令进行编号并依此保存,以维护命令历史.登录会话期间输入的命令保存在shell内存中,若终止命令则添加至历史文件. 1. 箭头符号方向键 使用键盘上的箭头方向键可以从 ...
    
			
    8. 
						
  8. Shell生成数字序列
			
    转自http://kodango.com/generate-number-sequence-in-shell Shell里怎么输出指定的数字序列: for i in {1..5}; do echo $ ...
    
			
    9. 
						
  9. excel 方框打钩
			
    将光标定位于需要打钩的地方,选择[插入]→[符号]→[其他符号] 在弹出的符号栏里,字体一定要改成[Windings2] 然后在符号栏便可以找到现成的打钩样式,点击插入,再关闭即可 提示:如果需要打叉 ...
    
			
    10. 
						
  10. 前端诡异参数start
			
    今天搞了一下午只为一个诡异事件:前端请求数据时总是会传一个start=20的参数,二搜索整个项目也找不出这个start的踪影. 倒是搜到一个pageLength的参数是20,但就是找不到start.  ...
    
			
    11.