固定Footer
Bootstrap框架提供了两种固定导航条的方式：
☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部
☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部
使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可：
实现原理：
实现原理很简单，就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed属性，并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0。具体的源码如下：
/源码请查看bootstrap.css文件第3717 行～第3738行/
.navbar-fixed-top,.navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030;}@media (min- 768px) {.navbar-fixed-top,.navbar-fixed-bottom { border-radius: 0; }}.navbar-fixed-top { top: 0; border- 0 0 1px;}.navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border- 1px 0 0;}
存在bug及解决方法:
从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：
法一：
body { padding-top: 70px; padding-bottom: 70px;}
因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。
法二：
其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面：
… … 我是内容
在文件中添加下列样式代码：
.navbar-fixed-top ~ .content { padding-top: 70px;}.navbar-fixed-bottom ~ .content { padding-bottom: 70px;}
法三.增加同级占位符
个人认为这个方法最为实用，在块之外再包裹一层div，然后再增加一个与同级的
块，这个
块的高度设置为与同样高，不包含任何内容，这样就可以起到一个占位符的效果，在页面最底占据与同样高度的空间，当然页面滑到最下方，原本的悬动块就会与这个占位块完美重叠。且不会对其他页面产生影响。代码如下：
唯一缺点是不符合语义化，增加了无实质内容的空标签。
复制代码
代码如下:
回复主题
附footer的一般写法：
```css.footer { position: fixed; right: 0; left: 0; z-index: 1030; bottom: 0;margin-bottom: 0; border- 1px 0 0;}