無法更改導航欄引導上的背景

我已經盡力編輯我的樣式每一個元素，但沒有什麼會改變我的導航欄的背景。我嘗試過編輯每一個可能在導航欄中的元素，但從字面上看沒有任何改變。我已經嘗試通過使用規則「#navbar .navbar-nav」來編輯它，但是每當我點擊背景顏色時，它都會回到透明狀態......我做錯了什麼？無法更改導航欄引導上的背景

HTML：

<header role="banner"> 
<nav id="navbar" class="navbar-default" role="navigation"> 
<div class="container-fluid"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 
<div class="collapse navbar-collapse" id="navbar-collapse"> 
    <ul class="nav navbar-nav"> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li> 
    <li></li> 
    <li><a href="#">Link</a><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    </ul> 
</div><!-- /.navbar-collapse --> 
</div><!-- /.container-fluid --> 
</nav> 
</header><!-- header role="banner" --> 
</body>

而我的風格：

#navbar .navbar-nav { 
// background: #FFFFFF; 
width: 100%; 
text-align: center; 

> .nav.navbar-nav li { 
display: inline-block; 
float: none; 
> .nav.navbar-nav a { 
    padding-left: 30px; 
    padding-right: 30px; 

} 
; 
background-color: #000000; 
} 
} 

} 
#navbar-primary-collapse .nav.navbar-nav li { 
color: #FFFF; 
padding-left: 30px; 
padding-right: 30px; 
background-color: #FFFFFF; 
} 
.container-fluid .navbar-header .navbar-toggle { 
background-color: #FFFFFF; 

} 
li a #logo-navbar-middle { 

} 
.nav.navbar-nav li a { 
padding-left: 30px; 
padding-right: 30px; 
text-align: center; 
color: #000000; 
text-transform: uppercase; 
float: none; 
display: inline-block; 
padding-left: 30px; 
padding-right: 30px; 
text-align: center; 
color: #000000; 
text-transform: uppercase; 
float: none; 
display: inline-block;} 
.nav.navbar-nav li { 
float: none; 
display: inline-block; 
}

來源

2017-05-26 Jacob Neyenhuis

歡迎來到SO :) #navbar元素的顏色正在改變。小提琴將有助於在這個問題上進行調整:) – semuzaboi

您的CSS不是CSS，而是SASS或等效的，或者它只是無效的CSS。更好的格式可以幫助我們理解你在做什麼。 – Rob

CSS

.navbar-default { 
    background-color: #fff; 
}

，並確保您的CSS文件引導CSS加載後

來源

2017-05-26 12:14:03

它看起來像你還沒有正確地在你的CSS聲明導航。請嘗試以下操作：

#navbar.navbar-default { 
    background-color: #fff; 
}

你會分開#navbar，即使他們都連接到同一元素.navbar-default。

另外，添加另一個階級和風格是這樣：

<nav id="navbar" class="navbar-default navbar-custom" role="navigation">

然後如下目標是：

#navbar.navbar-custom { 
    background-color: #fff; 
}

由於bootstrap.css只是樣式類作爲.navbar-default {}並假設你的CSS在BootStrap之後加載，以上將覆蓋BS's，因爲它是更具體的，並在之後加載。

如果你願意，你甚至可以完全刪除類navbar-default，並從頭開始添加自己的邊框/背景，而不是覆蓋。

來源

2017-05-26 12:58:30

謝謝!!!!!!!!!! –

@JacobNeyenhuis沒問題 - 如果它對你有幫助，請接受正確的答案 - 它可能會在未來幫助其他人。 –

無法更改導航欄引導上的背景

回答

相關問題