使引导导航栏透明时切换器图标消失答案

【问题标题】：Toggler Icon disappears when making bootstrap navbar transparent使引导导航栏透明时切换器图标消失
【发布时间】：2021-05-17 08:14:19
【问题描述】：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav id="fondo" class="navbar navbar-expand-lg fixed-top" style="background-color: rgba(0, 0, 0, 0.2);">

  <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>

</nav>

<div style="height:1000px"></div>

我用引导程序制作了一个透明的导航栏，但是当切换器图标必须出现时，它就在那里，但它也是透明的，我不知道如何让它可见。

我不知道你需要查看代码的哪一部分才能看到我的错误在哪里，但我让我的本地服务器保持打开状态，这样你就可以看到 html 和 css 代码。

http://87.218.3.238/cbd/

【问题讨论】：

从导航栏和切换图标添加相关代码。看起来您需要指定正在使用的背景类型。将 navbar-dark 类添加到您的 nav#fondo 元素中。

标签： css twitter-bootstrap navbar

【解决方案1】：

将所需的类之一添加到#fondo 导航，以便可以正确加载引导程序中的svg。

在你的情况下，很可能：

<nav id="fondo" class="navbar navbar-expand-lg fixed-top">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav id="fondo" class="navbar navbar-expand-lg fixed-top navbar-dark" style="background-color: rgba(0, 0, 0, 0.2);">

  <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>

</nav>

<div style="height:1000px"></div>

【讨论】：

css文件中已经有了样式：#fondo { color: white;背景色：rgba(0, 0, 0, 0.2);过渡：0.5s； }
基于这些类引导加载切换器图标的 svg 图像。

【解决方案2】：

使用 jquery

var cdbMenu = $("#fondo");
var cdbMenuSize = 992;
function cdbMenuSwap()
{
    if (window.innerWidth >= cdbMenuSize) {
        cdbMenu.css({"background-color": "rgba(0, 0, 0, 0.2)"});
    } else {
        cdbMenu.removeAttr('style');
    }
}
$(window).on('resize', function () {
    cdbMenuSwap();
});
$(document).ready(function () {
    cdbMenuSwap();
});

【讨论】：