如何改变Bootstrap Navbar Toggler Icon的背景颜色，当它是活动的，当使用其他框架，如Materialize？

问题描述 投票：1回答：1

我正在做一个项目，需要同时使用Bootstrap & Materialize框架。我有这个导航条切换器，在不处于活动状态时是正常的。

enter image description here

但是当它进入活动状态，并且有一个背景填充Materialize CSS的默认颜色。

enter image description here

我试图将背景色设置为透明色，但它没有。这是我试过的CSS。

.navbar-toggler-icon{
  background-color: transparent !important;
}
.navbar-toggler-icon :active{
  background-color: transparent !important;
}

这是我的代码 联系.

css bootstrap-4 toggle navbar materialize
1个回答
1
投票

我已经添加了一个 id在 div 的所有内容。navbar.

<body>
  <div class="navbar navbar-dark navbar-expand-lg sticky-top w-100" >
            <div id="color" class="container p-2">
                <a class="navbar-brand font-weight-bold text-white mx-5 d-none d-sm-block" href="#">ReEvent</a>
                <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>
                  </div>
  </div>
    </body>

当我改变颜色在一个 id 如果 id 是在 div 体内 div 会一起改变。所以我把它只是为了 button 接收修改。

但是，不知道为什么，这个按钮一直有 "bug"，如果你把 :focus 就在它身上，所以我已经把它的 :focus 在这之后，我已经删除了一切的 :focus 的 a 用一个特定的bg给他。

body{
  background-color: #222;
}
.navbar-toggler-icon{
  background-color: transparent !important;
}
#color button :hover, #color :focus, #color button :active{
  background-color: transparent !important;
}

#color a :focus {
  background-color: white !important;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.