Bootstrap可以改变navbar的颜色却不能去掉颜色？答案

【问题标题】：Bootstrap can change the color of navbar but can't get rid of the color?Bootstrap可以改变navbar的颜色却不能去掉颜色？
【发布时间】：2017-09-24 07:35:15
【问题描述】：

/*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>
	<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>

不知道为什么我在使用这个导航栏时遇到这么多麻烦。尝试引导，因为它应该让事情变得更容易..

但我可以将导航栏背景的颜色更改为蓝色。但是，如果我不给背景颜色。它什么都不做。

我已尝试将其标记为重要，我看到了将其设置为默认导航栏的建议，但无法使其正常工作。我只是想让背景透明，里面没有任何东西。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

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>

【讨论】：

亲爱的上帝，就是这样，啤酒和巫师3次哈哈
乐于助人:)

【解决方案2】：

对于透明背景，您需要：

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

【讨论】：