2017-09-23 76 views
2

Bootstrap可以改變導航欄的顏色,但不能擺脫顏色?

/*This is for the overall look of the page, what font and the repeated background image*/ 
 
body { 
 

 
    background-image: url("../Assets/crossword.png"); 
 
    font-family: Rockwell, "Courier New", Georgia, 'Times New Roman', serif; 
 

 
} 
 

 
/*This is just to get the main content of the page centered*/ 
 
#mainBody { 
 
    width: 80%; 
 
    margin: auto; 
 
    margin-top: 10px; 
 
} 
 

 

 
.navbar-custom { 
 
    background-color: none; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <!-- This is the title of the first page --> 
 
    <title></title> 
 
\t <meta charset="utf-8" /> 
 

 
    <!-- This is the viewport settings for bootstrap --> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 

 
    <!-- These are the javascript, CSS, and jquery file scripts --> 
 
    <script src="Scripts/jquery-1.9.1.min.js"></script> 
 
    <script src="Scripts/bootstrap.min.js"></script> 
 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="Content/MyStyleSheet.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <div id="mainBody"> 
 
     
 
     <nav class="navbar navbar-inverse navbar-custom"> 
 

 
     </nav> 
 
      
 

 
      
 
     
 
    </div> 
 
     
 
    
 
</body> 
 
</html>

不知道爲什麼我有這個導航欄這麼大的麻煩。嘗試引導,因爲它應該使事情變得更容易..

但我可以改變導航欄背景的顏色來說藍色。但是,如果我給背景顏色沒有。它什麼也沒做。

我已經嘗試將其標記爲重要的,我看到了使它成爲navbar-default並且無法使其工作的建議。我只是想讓背景變得透明而沒有任何內容。

回答

2

none並不出彩,所以你不能把它作爲背景色。您可以改用transparent

您遇到的另一個問題是您的<nav>元素中的navbar-inverse類,它將獲得更高的優先級。

您可以使用.navbar-custom.navbar-inverse來解決這個問題:

/*This is for the overall look of the page, what font and the repeated background image*/ 
 
body { 
 

 
    background-image: url("../Assets/crossword.png"); 
 
    font-family: Rockwell, "Courier New", Georgia, 'Times New Roman', serif; 
 

 
} 
 

 
/*This is just to get the main content of the page centered*/ 
 
#mainBody { 
 
    width: 80%; 
 
    margin: auto; 
 
    margin-top: 10px; 
 
} 
 

 

 
.navbar-custom.navbar-inverse { 
 
    background-color: transparent; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div id="mainBody"> 
 

 
    <nav class="navbar navbar-inverse navbar-custom"> 
 

 
    </nav> 
 

 
</div>

+0

親愛的上帝,這一切是,它的啤酒和巫師3時間哈哈 –

+0

快樂幫:) – Dekel

0

爲透明背景,你需要:

.navbar-custom { 
    background-color: transparent; 
}