引導3：擁有修改導航欄的問題

我有以下的導航欄HTML：引導3：擁有修改導航欄的問題

<nav id="k9nav" class="navbar navbar-default navbar-static-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#k9nav"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">K9SportsCenter</a> 
     </div> 

     <div class="collapse navbar-collapse" id="k9nav"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Plans</a></li> 
       <li><a href="#">FAQ</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">About</a></li> 
      </ul> 
     </div> 
    </div> 
</nav>

，並在測試如何修改它，我試圖把所有的文本白色和申請中的鏈接懸停效果該<ul>與下面的CSS：

#k9nav { 
    background-color: blue; 
    color: white; 
} 

#k9nav ol li:hover { 
    background-color: black; 
    border-bottom: 2px solid red; 
} 

#k9nav ol li:active { 
    background-color: black; 
}

不幸的是，結果均小於我的預期：

navbar that doesn't look quite right

如果圖片不清楚，文字顏色有而不是已變成白色，我想要的懸停效果完全不起作用（不要擔心，這不是我真正的設計..我只是想看看我能如何將Bootstrap彎曲到我的意志）。

我真的只需要知道我應該修改什麼來獲得我想要的結果。

來源

2014-01-16 Major Productions

引導包含這些元素更具體的規則，那麼它將覆蓋你的規則..

嘗試

#k9nav .navbar-brand, 
#k9nav.navbar-default .navbar-nav > li > a { 
    color:white; 
} 
#k9nav.navbar-default .navbar-nav > li > a:hover { 
    background-color: black; 
    border-bottom: 2px solid red; 
}

演示在http://jsfiddle.net/gaby/LLgkf/

而且，你的HTML是多次使用k9nav ID無效..

來源

2014-01-17 00:00:13

您靶向在CSS醇，但在HTML中使用UL所以沒有被應用

#k9nav ol li

和

<ul class="nav navbar-nav navbar-right">

的規則。你需要改變一個或另一個，所以他們相互匹配。

來源

2014-01-16 23:52:26

您沒有定位正確的要素有兩個原因：

你指定一個未有序列表中錯誤的元素。 <ol>應該是<ul>
您不是嵌套到適當的級別。

您需要更改此：

#k9nav ol li:hover { 
    background-color: black; 
    border-bottom: 2px solid red; 
} 

#k9nav ol li:active { 
    background-color: black; 
}

要這樣：

#k9nav > div > div > ul > li:hover { 
    background-color: black; 
    border-bottom: 2px solid red; 
} 

#k9nav > div > div > ul > li:active { 
    background-color: black; 
}

甚至更好：

.navbar-nav > li { 
... styles 
}

這裏是嵌套的一個更好的解釋鏈接：

http://www.htmldog.com/guides/css/intermediate/grouping/

來源

2014-01-17 00:00:03 Jerreck

您需要針對他們更具體：

#k9nav ul li a, 
#k9nav .navbar-brand { 
    color: white; 
}

DEMO：http://jsfiddle.net/VT4Fc/1/（CSS和JS從引導CDN加載）

還你的#k9nav重複ID在我建議你改變的HTML中。

來源

2014-01-17 00:00:40 Arbel

引導3：擁有修改導航欄的問題

回答

相關問題