更改折叠的导航栏列表背景颜色

Question

所以，我遇到了一个问题，当我折叠导航栏（它变成切换按钮）并切换列表时，背景色是透明的。 由于我为导航栏使用了透明背景，因此应该可以预期，但是当内容切换到打开状态时，它会与屏幕上的文本重叠，并且变得凌乱而丑陋。 我想将div的背景色设置为当我折叠到移动版本（引导程序）时更改，有什么方法可以做到这一点？

这是我的代码：

 .navbar-right .dropdown-menu { right: 0; left: auto; top: 60px; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #4f82e9; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #4f82e9; background-color: transparent; } #offcanvas .navbar-nav > li:last-child > a { border-bottom-color: transparent !important; } @media (min-width: 768px) { .navbar-toggle { display: none; } } .navbar-default .navbar-toggle { position: relative; float: right; padding: 5px 5px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; background-color: transparent; background-image: none; border: 1px solid transparent !important; border-radius: 2px !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-fixed-top js-navbar-top js-toggleClass"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand page-scroll" href="#page-top">ABA Arquitetura</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right "> </li> <li> <a class="page-scroll" href="#lancamentos">Lançamentos</a> </li> <li> <a class="page-scroll" href="#services">Serviços</a> </li> <li> <a class="page-scroll" href="#portfolio">Portfolio</a> </li> <li> <a class="page-scroll" href="#contact">Contato</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> 

Answer 1

这是您要找的东西吗？

将此添加到您的CSS：

@media (max-width: 767px) {
  .navbar-collapse
    {
        background-color:#FA0;
    }
}

我曾经得出一个jsfiddle结论： https ://jsfiddle.net/7gvg6mxp/

Answer 2

您也可以这样做：在Bootstrap 4中正常工作

$(".navbar-toggler").click(function () {
$("nav").toggleClass("bg-light");
})

您的背景一开始可能是透明的，但是单击切换按钮后，导航栏的背景将为“ bg-light”。