Question

我想改变bootstrap导航栏的颜色。它是黑色的颜色。我想换成另一种颜色。我应该更改哪些css引导代码？

HTML代码：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">A</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

我试图改变navbar-inverse的颜色..但它不起作用

Answer 1

您需要更改现在为background-color: #222; border-color: #080808;

的.navbar-inverse样式

Answer 2

我已经成功地改变了颜色。使用.container-fluid可以使它成为......希望

CSS代码：

.container-fluid{
background-color:#FF6347;
}

.navbar-inverse .navbar-brand {
  color: #1E90FF;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #4169E1;
  background-color: transparent;
}

HTML代码：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap导航栏颜色

2 个答案: