## 固定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-width: 768px) { .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; } } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0; }**存在bug及解决方法:** 从运行效果中大家不难发现,页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容,我们需要在body上做一些处理:
body { padding-top: 70px;/*有顶部固定导航条时设置*/ padding-bottom: 70px;/*有底部固定导航条时设置*/ }因为固定导航条默认高度是50px,我们一般设置padding-top和padding-bottom的值为70px,当然有的时候还是需要具体情况具体分析。 **第二种解决这个bug方法:** 其实除了这种解决方案之外,我们还有其他的解决方法,把固定导航条都放在页面内容前面:
在文件中添加下列样式代码:我是内容
.navbar-fixed-top ~ .content { padding-top: 70px; } .navbar-fixed-bottom ~ .content { padding-bottom: 70px; }总结: 在Bootstrap中想要固定底部只需添加`navbar-fixed-bottom` 其原理就是
.navbar-fixed-bottom{
position:fixed;
bottom:0;
}
附footer的一般写法:
```css
.footer {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
bottom: 0;
margin-bottom: 0;
border-width: 1px 0 0;
}