logo标签列表

更改导航栏中Bootstrap图标栏的颜色

htmlcsstwitter-bootstrap
3

我无法更改切换图标栏的颜色。 我想将颜色更改为白色。

<nav class="navbar navbar-toggleable-md navbar-light">
    <button class="navbar-toggler navbar-toggler-right" type="button"  style = "border: 2px solid #E0E0E0;" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon icon-bar" style = "color: white;"></span>
    </button>
    <a class="navbar-brand" href="#">SWAPNIL SARAF</a>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">WORK <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">INSPIRATIONS</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">ABOUT</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</nav>

style.css

以下是我的CSS文件:

.navbar .navbar-toggler .icon-bar{
   background-color: white !important;
}
是的，它正在改变整个背景。我只想将图标栏的颜色更改为白色。 - swapnil saraf
请尝试我的示例，我已将其更改为红色，请根据您的需求更换颜色。 - Ganesh Putta
我正在尝试，但它正在改变切换按钮内部的背景颜色。我只想改变图标栏的颜色。 - swapnil saraf
@swapnilsaraf 请检查我的答案！！ - Sahil Dhir
@SahilDhir 实际上我在使用 Bootstrap 4，而你的代码中的 css 文件是 Bootstrap 3 的，因此我的整个 css 都被破坏了。所以能否请你帮帮我？ - swapnil saraf
你想要图标栏是什么颜色？ - Sahil Dhir
6个回答
2
我检查了您的代码结构，导致您的CSS代码不起作用的原因是以下按钮代码中的.navbar-toggle类被删除了：
<button class=" navbar-toggler  navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

因为Bootstrap的CSS是基于navbar-toggle这个类编写的，所以在这里添加navbar-toggle类。

<button class=" navbar-toggle navbar-toggler  navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

请检查我使用您的HTML代码尝试的示例： 

.navbar .navbar-toggler .icon-bar {
  background: black !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">




<nav class="navbar navbar-toggleable-md navbar-light">
  <button class="navbar-toggle navbar-toggler  navbar-toggler-right" type="button" style="border: 2px solid #E0E0E0;" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon icon-bar" ></span>
            </button>
  <a class="navbar-brand" href="#">SWAPNIL SARAF</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">WORK <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">INSPIRATIONS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

2

我注意到这里有两个问题

  1. 在style.css中

将!importtant替换为!important

  1. 使用以下方式的css类

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

谢谢， Arun

0

试试这个

.navbar-default .navbar-toggle .icon-bar {
        background-color: #ffffff !important;
}
请参考这里：https://dev59.com/umIj5IYBdhLWcg3wMiUu - Rajesh Karunakaran
0

将此更改为您的代码。

HTML

<span class="navbar-toggler-icon icon-bar"></span>

CSS

.navbar .navbar-toggler .icon-bar {
    color: #fff !important;
}
我应该在CSS中传递哪些类，没有带有.navbar-default的类。 - swapnil saraf
你应该传递.navbar或.navbar-light类，而不是navbar-default类。回答中忘记更改。稍后会更新。 - Prasath V
0

我已经将颜色改为红色。你可以尝试这样做，你可以改变你想要的颜色。

  .navbar-inverse .navbar-toggle .icon-bar {
    background-color: red !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>

0

首先，你需要确切地找出在你所使用的 Bootstrap 版本中 icon-bar 的具体 CSS 选择器路径。我发现最可靠的方法是使用开发者工具控制台。例如，在 Chrome 中，右键单击图标并选择 检查。

这将带您到大致的 HTML 网页位置，您应该能够看到类似于以下屏幕截图中的内容：.navbar-default .navbar-toggle .icon-bar 带有一个单一的 background-color 规则。

enter image description here

小技巧：您可以单击background-color规则的小色块，直接在页面上更改icon-bar颜色。

从那里开始，只需从Dev Tools窗口直接复制CSS，粘贴到您的自定义CSS文件中，并根据喜好调整颜色即可。

希望这有所帮助！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接