在Twitter的Bootstrap中更改導航欄顏色2.3.2

Question

我已經看過其他文章來解決這個問題，但我仍然無法改變Twitter Bootstrap中導航欄的背景顏色。我正在使用版本2.3.2。我在帖子Change navbar color in twitter bootstrap 2.0.4中完成了baptme描述的所有內容。這裏是我用來覆蓋原始bootstrap.css文件的CSS。

.navbar-inner { 
    background: #eab92d; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eab92d', endColorstr='#c79810',GradientType=0); /* IE6-8 */ 
    } 

    .navbar-inner, .navbar .btn-navbar { 
    background: #eab92d; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eab92d', endColorstr='#c79810',GradientType=0); /* IE6-8 */ 
    } 

    .navbar .divider-vertical { 
    background-color: #c79810; 
    border-right: 1px solid #eab92d; 
    } 

    .navbar .nav .active > a, .navbar .nav .active > a:hover { 
    background-color: #c79810; 
    } 

    .navbar .nav > li > a { 
    color: #f9ed9d; 
    } 

.navbar-fixed-top .brand { 
    color: #634c08;color: #f4dc87; 
    } 

    .navbar .nav > li > a:hover {color:white;} 

    .navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;} 

當我運行這一點，唯一改變的是，積極的「家」環節都有＃c79810背景顏色。其他一切仍然有默認的黑色背景色。

此外，我真的不在乎有梯度，除非它是必需的。只是一個堅實的背景顏色是好的。

任何想法，我做錯了什麼？謝謝！

Answer 1

（對Twitter的引導3，請參見：Change navbar color in Twitter Bootstrap 3）

不要忘了刪除梯度設置background-image: none;

範例CSS代碼：（參見：http://bootply.com/66394）

/* set the background-color to red */ 
.navbar-inner { 
    background-color: red; 
    /* remove the gradient */ 
    background-image: none; 
    /* set font color to white */ 
    color: white; 
} 

/* menu items */ 

/* set the background of the menu items to pink and default color to white */ 
.navbar .nav > li > a { 
    background-color: pink; 
    color: white; 
} 

/* set hover and focus to lightblue */ 
.navbar .nav > li > a:focus, 
.navbar .nav > li > a:hover { 
    background-color: lightblue; 
    color: white; 
} 

/* set active item to darkgreen */ 
.navbar .nav > .active > a, 
.navbar .nav > .active > a:hover, 
.navbar .nav > .active > a:focus { 
    background-color: darkgreen; 
    color: white; 
} 

/* set font color and background of the project name (brand) */ 
.navbar .brand { 
    background-color: orange; 
    color: navy; 
} 

在引導程序的CSS後添加此代碼

使用更少

你也可以考慮編譯你自己的版本。嘗試http://twitter.github.io/bootstrap/customize.html（其中有一個用於導航欄設置的分開部分）或從https://github.com/twitter/bootstrap下載您自己的副本。 您將在variables.less中找到navbar設置。 navbar.less用於編譯導航欄（取決於variables.less和mixins.less）。

使用如下所示的設置會給你顏色變化之前，但更穩定，並與梯度相同：

// Navbar 
// ------------------------- 
@navbarCollapseWidth:    979px; 
@navbarCollapseDesktopWidth:  @navbarCollapseWidth + 1; 

@navbarHeight:     40px; 
@navbarBackgroundHighlight:  #FF0000; // red 
@navbarBackground:    darken(@navbarBackgroundHighlight, 5%); 
@navbarBorder:     darken(@navbarBackground, 12%); 

@navbarText:      #fff; //white 
@navbarLinkColor:     #fff; 
@navbarLinkColorHover:   #fff; 
@navbarLinkColorActive:   #fff; 
@navbarLinkBackgroundHover:  #ADD8E6; //lightblue 
@navbarLinkBackgroundActive:  #006400; //darkgreen 

@navbarBrandColor:    #000080; // navy 

注意沒有變量設置品牌的背景顏色。爲了改變這種背景顏色，你將不得不添加類似：

.navbar .brand { 
    background-color: #FFA500; // orange 
} 

參見：http://bootply.com/66399

Answer 2

您將需要一些CSS來覆蓋它。 確保這個負載之下引導CSS 這將使導航欄棕色

.navbar { 
    background-color: #442a13; 
} 

/* set the background-color to red */ 
.navbar-inner { 
    background-color: #442a13 !important; 
    background-image: -webkit-linear-gradient(top, #442a13 0%, #291306 100%)!important; 
    background-image:   linear-gradient(to bottom, #442a13 0%, #291306 100%)!important; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#442a13', endColorstr='#291306', GradientType=0)!important; 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    background-repeat: repeat-x; 
    color:#fff; 
    border: none; 

} 

.navbar-inverse .nav .active>a, .navbar-inverse .nav .active>a:hover, .navbar-inverse .nav .active>a:focus{ 
    background-color: #291306; 
    color:#fff; 
} 

.dropdown-menu{ 
    background-color: #371c09; 
    padding-left: 5px; 
} 

.navbar-inverse .brand, .navbar-inverse .nav>li>a{ 
    color: #fff; 
} 

.navbar-inverse .nav .dropdown-header{ 
    color:#ccc; 
} 

.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav li.dropdown.active>.dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle{ 
    background-color: #291306; 
} 

.nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a{ 
    color:#fff; 
} 

.nav-collapse .nav>li>a:hover, .nav-collapse .dropdown-menu a:hover{ 
    background-color: #371c09 !important; 

    background-image: -webkit-linear-gradient(top, #371c09 0%, #291306 100%)!important; 
    background-image:   linear-gradient(to bottom, #371c09 0%, #291306 100%)!important; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#371c09', endColorstr='#291306', GradientType=0)!important; 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    background-repeat: repeat-x; 
    color:#fff; 
} 

.navbar-inverse .nav li.dropdown>.dropdown-toggle .caret { 
border-top-color: #fff; 
border-bottom-color: #fff; 
} 

.navbar .nav li.dropdown>.dropdown-toggle .caret{ 
border-top-color: #fff; 
border-bottom-color: #fff; 
} 

.navbar-inverse .divider-vertical { 
border-right-color: #371c09; 
border-left-color: #291306; 
}