Bootstrap关于导航条点击后移出此区域背景颜色变白
Bootstrap中導(dǎo)航條組件要求放入在nav并且類名為navbar navbar-defautl(default可換)，
的標(biāo)簽內(nèi)。
但navbar-default會(huì)自動(dòng)給這個(gè)導(dǎo)航條添加一些默認(rèn)背景樣式,在實(shí)際開發(fā)場(chǎng)景中，自然不會(huì)使用官方給的默認(rèn)樣式。
所以我就想著給nav定一個(gè)新的class并為其添加樣式
很明顯背景顏色和其他樣式都添加成功，并且可以正常使用導(dǎo)航條的功能。
不管是點(diǎn)擊后觸發(fā)的事件還是下拉框的展開都能成功運(yùn)行，但當(dāng)我還沒給a標(biāo)簽href添加地址時(shí)，我點(diǎn)擊了此標(biāo)簽，雖然什么都沒觸發(fā)，但當(dāng)我把鼠標(biāo)移出此區(qū)域時(shí)就出現(xiàn)問題了。
當(dāng)我點(diǎn)擊后移出此li的區(qū)域后,背景顏色被變成了灰白色。
我以為是nav標(biāo)簽自帶的標(biāo)簽事件,但我在控制臺(tái)檢查標(biāo)簽樣式時(shí)沒有發(fā)現(xiàn)任何的關(guān)于背景顏色改變過(guò)的樣式。
在我連同Bootstrap的js文件css文件全部檢查過(guò)后,發(fā)現(xiàn)是沒加navber-default的原因
，js文件中為其綁定一個(gè)鼠標(biāo)移出事件，當(dāng)移出后將背景顏色改為灰白。
解決方案
<head><style type="text/css">.navbar {border-radius: 0;border: 0;}nav.navbar-default{background-color: #c11010;border-color: #c11010;}</style> </head> <nav class="navbar navbar-default"></nav>為nav添加navbar-default默認(rèn)樣式類，
此時(shí)會(huì)發(fā)現(xiàn)點(diǎn)擊并移出后樣式?jīng)]有發(fā)生改變,但是為導(dǎo)航條增加了白色的圓角
所以必須將.navbar樣式表中的圓角去除并把navbar-default的默認(rèn)背景顏色設(shè)置為你所中意的樣式即可修復(fù)
總結(jié)
以上是生活随笔為你收集整理的Bootstrap关于导航条点击后移出此区域背景颜色变白的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 短视频去水印API文档
- 下一篇： swf动画播放