更改折疊的導航欄列表背景顏色

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