固定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，當然有的時候還是需要具體情況具體分析。
法二：
其實除了這種解決方案之外，我們還有其他的解決方法，把固定導航條都放在頁面內容前面：
… … 我是內容
在文件中添加下列樣式代碼：
.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-width: 1px 0 0;}