Question

我正在尝试自定义boostrap 4导航栏，我从boostrap网站复制了导航栏代码并删除了类navbar-light和bg-light，并在使用类navbar-custom时替换。我设法改变了导航栏的颜色，但是当我把网站缩小并且图标不再显示时，我意识到汉堡包图标已经消失了。我还检查了data-target有正确的id作为ul id。但是一旦我删除了类导航灯和bg-light，为什么图标消失了。

请查看我的代码here

 <nav class="navbar navbar-expand-lg navbar-custom">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

问题来自于您删除navbar-light。

Bootstrap 4根据此类（_navbar.scss）设置下拉切换样式：

.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5);
}

您可以将这些样式添加到自定义类：

.navbar-custom .navbar-toggler {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5);
}

或者更好的是，只需保留默认的navbar-light课程，然后将自定义样式应用于navbar / navbar-toggle / navbar-collapse三个班级。

Boostrap 4汉堡包图标在定制后消失了

1 个答案: