很多情況之一，設計師希望導航條固定在瀏覽器頂部或底部，這種固定式導航條的應用在移動端開發中更為常見。Bootstrap框架提供了兩種固定導航條的方式：
? .navbar-fixed-top：導航條固定在瀏覽器窗口頂部
? .navbar-fixed-bottom：導航條固定在瀏覽器窗口底部
使用方法很簡單，只需要在制作導航條最外部容器navbar上追加對應的類名即可：
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> … </div> <div class="content">我是內容</div> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> … </div>
實現原理：
實現原理很簡單，就是在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方法：
其實除了這種解決方案之外，我們還有其他的解決方法，把固定導航條都放在頁面內容前面：
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> … </div> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> … </div> <div class="content">我是內容</div>
在文件中添加下列樣式代碼：
.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}
當然，這種方法有的時候也是需要具體情況具體分析的。
我來試試：完成下面任務
在代碼編輯器中設置代碼，驗證“內容頂部和底部被固定導航條遮住”的問題是否可以解決。
參考代碼：
<style type="text/css">
body{
padding-top: 70px;
padding-bottom: 70px;
}
</style>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報