Bootstrap 4 折叠导航栏背景颜色

Question

Bootstrap 4 折叠导航栏背景颜色

6

我想要在 bootstrap 4 alpha v6 中改变折叠导航栏的背景颜色。当然，我想要改变整个导航栏的背景颜色。

所以问题是有哪个类负责导航栏的折叠？到目前为止我找到的唯一div是#navbarSupportedContent，但它只是导航栏中ul的内容（所以它不能改变整个导航栏的颜色）。我可以在jquery中检查导航栏是否已折叠，然后更改背景颜色，但我想知道是否可以简单地在css中完成。

除此之外，我想说一下，导航栏默认颜色是透明的，这就是为什么在折叠时我想改变它的颜色。

我还有一个问题：什么类负责BS4中的导航栏切换器图标？我问这个问题是因为我想改变图标的颜色。我已经找到并尝试了以下内容：

.navbar-toggler-icon {
  color:white !important;
}

- Martin

3个回答

3

“...但情况是我的背景色最初是透明的，如果有人将其折叠，则应更改背景色。”

我这样做了：

<style>
.navbar { 
    background-color: transparent;
}
.navbar.collapse {
    display:flex;
}
.navbar.collapsing,
.navbar.show {
    background:white !important;
}
</style>



<nav class="navbar navbar-light navbarSupportedContent">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
    </button>
   <div class="collapse navbar-collapse navbarSupportedContent">
   </div>
</nav>

- gest

0

这是对我有用的：

    .navbar-collapse {
    background-color: white;
}

- Bonfix Ngetich

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Syden · Accepted Answer

Bootstrap v5 更新

这是一个 Bootstrap 5 的 CSS 指南，介绍如何修改 .navbar、内部链接以及汉堡按钮（都避免使用 !important，该属性只应该作为最后的覆盖选择）：

/* change navbar background */
nav.navbar {
  background: transparent;
}

/* change navbar-brand color */
.navbar a.navbar-brand {
  color: white;
}

/* change navbar-brand color on hover */
.navbar a.navbar-brand:hover {
  color: green;
}

/*  change navbar li colors, also active one but not disabled one */
.navbar ul.navbar-nav li.nav-item a.nav-link {
  color: white;
}

/* change navbar-toggler inside lines color (stroke) */
.navbar-light span.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='yellow' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  color: white;
}

/* change hamburger button border color */
.navbar-light button.navbar-toggler {
  border-color: yellow;
}

/* change navbar background on collapse */
@media (max-width: 768px) {
  nav.navbar {
    background: lightgray;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

v4原始回答。

/* change navbar background */
nav.navbar {
  background: transparent;
}
/* change navbar-brand color */
.navbar a.navbar-brand {
  color: white;
}
/* change navbar-brand color on hover */
.navbar a.navbar-brand:hover {
  color: green;
}
/*  change navbar li colors, also active one but not disabled one */
.navbar ul.navbar-nav li.nav-item a.nav-link {
  color: white;
}
/* change navbar-toggler inside lines color (stroke) */
.navbar-light span.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='yellow' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  color: white;
}
/* change hamburger button border color */
button.navbar-toggler.navbar-toggler-right {
  border-color: yellow;
}
/* change navbar background on collapse */
@media (max-width: 768px) {
  nav.navbar {
    background: lightgray;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-md-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>