很多情況之一，設(shè)計師希望導(dǎo)航條固定在瀏覽器頂部或底部，這種固定式導(dǎo)航條的應(yīng)用在移動端開發(fā)中更為常見。Bootstrap框架提供了兩種固定導(dǎo)航條的方式：
? .navbar-fixed-top：導(dǎo)航條固定在瀏覽器窗口頂部
? .navbar-fixed-bottom：導(dǎo)航條固定在瀏覽器窗口底部
使用方法很簡單，只需要在制作導(dǎo)航條最外部容器navbar上追加對應(yīng)的類名即可：
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> … </div> <div class="content">我是內(nèi)容</div> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> … </div>
實(shí)現(xiàn)原理：
實(shí)現(xiàn)原理很簡單，就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed屬性，并且設(shè)置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及解決方法:
從運(yùn)行效果中大家不難發(fā)現(xiàn)，頁面主內(nèi)容頂部和底部都被固定導(dǎo)航條給遮住了。為了避免固定導(dǎo)航條遮蓋內(nèi)容，我們需要在body上做一些處理：
body {
padding-top: 70px;/*有頂部固定導(dǎo)航條時設(shè)置*/
padding-bottom: 70px;/*有底部固定導(dǎo)航條時設(shè)置*/
}
因為固定導(dǎo)航條默認(rèn)高度是50px，我們一般設(shè)置padding-top和padding-bottom的值為70px，當(dāng)然有的時候還是需要具體情況具體分析。
第二種解決這個bug方法：
其實(shí)除了這種解決方案之外，我們還有其他的解決方法，把固定導(dǎo)航條都放在頁面內(nèi)容前面：
<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">我是內(nèi)容</div>
在文件中添加下列樣式代碼：
.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}
當(dāng)然，這種方法有的時候也是需要具體情況具體分析的。
我來試試：完成下面任務(wù)
在代碼編輯器中設(shè)置代碼，驗證“內(nèi)容頂部和底部被固定導(dǎo)航條遮住”的問題是否可以解決。
參考代碼：
<style type="text/css">
body{
padding-top: 70px;
padding-bottom: 70px;
}
</style>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報