2016-03-05 52 views
0

我一直在嘗試更改導航欄上的背景顏色等。發現 Change navbar color in Twitter Bootstrap 3 所以我複製它,改變了顏色的其他地方一個例子,我的CSS是這樣的:如果我使用更改BootStrap導航欄上的默認設置

.navbar-actions { 
    background-color:#0099cc; 
    color:#ff6600; 
    border-radius:0; 
} 

.navbar-actions .navbar-nav > li > a { 
    color:#ff6600; 
} 
.navbar-actions .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { 
    color: #ff6600; 
    background-color:transparent; 
} 
.navbar-actions .navbar-brand { 
    color:#ff6600; 
} 

我的代碼工作正常,導航欄,默認情況下它正確地崩潰,並顯示按鈕展開。當我切換到navbar-actions時,導航器沒有顏色,當它摺疊時沒有展開按鈕。這裏是我的導航器的代碼:

<nav class='navbar navbar-actions'> 
        <div class="container-fluid"> 
         <div class='navbar-header'> 
          <button type='button' class='navbar-toggle' data-toggle='collapse' 
           data-target='#viewNavbar'> 
           <span class='icon-bar'></span> 
           <span class='icon-bar'></span> 
           <span class='icon-bar'></span> 
          </button> 
          <div class='hidden-sm hidden-md hidden-lg'> 
           <a class="navbar-brand">Actions</a> 
          </div> 
         </div><!-- navbar-header --> 
         <div class='collapse navbar-collapse' id='viewNavbar'> 
          <ul class="nav nav-pills"> 
           <li role="presentation"> 
            Action One 
           </li> 
           <li role='presentation'> 
            Action Two 
           </li> 
           <li role='presentation'> 
            Action Three 
           </li> 
          </ul> 
         </div><!-- collapse --> 
        </div><!-- container --> 

       </nav> 

我只是真的進入引導格式,所以任何幫助將不勝感激。

回答

1
.navbar-weather { 
    background-color: #336699; 
    color:#eee; 
    border-radius:0; 
} 

.navbar-weather .navbar-nav > li > a { 
    color:#dcdcdc; 
    padding-left:20px; 
    padding-right:20px; 
} 

.navbar-weather .navbar-nav > .active > a, .navbar-nav > .active >  a:hover, .navbar-nav > .active > a:focus { 
    color: #B0C4DE; 
    background-color: transparent; 
} 

.navbar-weather .navbar-nav > li > a:hover, .nav > li > a:focus { 
    text-decoration: none; 
    color: #000; 
    background-color: #B0C4DE; 
} 

.navbar-weather .navbar-brand { 
    color :#eee; 
} 

.navbar-weather .navbar-toggle { 
    color: #eee 
    background-color: transparent; 
} 

.navbar-weather .icon-bar { 
    background-color: #dcdcdc; 
} 

這裏(而不是使用導航欄 - 行動)就是我用我的weathersite

+0

這似乎已經做到了,但不明白爲什麼我原來的那個不行。任何它正在做我想做的事情,所以我會繼續前進。謝謝 –

1

在這種情況下,只需重寫.navbar-default類時是否存在任何問題?

+0

不能完全確定你的意思是什麼壓倒一切的導航欄,你可以給一個爲實例? –

+0

如果navbar默認類正在工作,請繼續使用

+0

我修改了我的css並添加了您的示例(刪除其他內容只是爲了確保)導航欄以默認背景和其他格式顯示。 –