Question

我在Bootstrap网站上工作，想知道是否有可能在小屏幕上为展开的导航栏添加背景色。下面的图像可以为您提供我想要的示例：

因此，基本上，当您单击汉堡包并显示菜单时，我希望它具有背景色。在更大的屏幕上应该有背景色。

我知道如何更改导航栏的背景颜色，但我想知道是否有可能仅将其提供给展开的菜单。

编辑：这是我的导航栏代码：

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav w-75 m-auto justify-content-around">
      <a class="nav-item nav-link active" href="#">Over ons <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Assortiment</a>
      <a class="nav-item nav-link" href="#">Specialiteiten</a>
      <a class="nav-item nav-link" href="#">Contact</a>
    </div>
  </div>
</nav>

Answer 1

使用与navbar-expand-md断点相对应的媒体查询...

@media(max-width: 768px) {
    .navbar.bg-light {
        background-color: red !important;
    }
}

https://www.codeply.com/go/Fzyc7GE495

这将更改整个导航栏的颜色，而不仅仅是折叠的部分。请注意，由于使用的是!important，因此您需要使用bg-light。导航栏默认情况下没有颜色，因此除非您需要导航栏在更大的屏幕宽度上显示颜色，否则您无需使用bg-light。

Answer 2

添加media queries来实现

@media (min-width: 434px) {
  .navbar-collapse{
  background-color: red;
  }  
}
@media (min-width: 768px) {
  .navbar-collapse{
  background-color: unset;
  }  
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav w-75 m-auto justify-content-around">
      <a class="nav-item nav-link active" href="#">Over ons <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Assortiment</a>
      <a class="nav-item nav-link" href="#">Specialiteiten</a>
      <a class="nav-item nav-link" href="#">Contact</a>
    </div>
  </div>
</nav>

Answer 3

是的，您可以毫无问题地更改导航栏背景颜色。但是，您想在切换单击时更改背景色，为此，您需要添加一个简单的脚本来切换导航栏上的类，使用它可以更改背景色

Foo._()

$(document).ready(function(){
$('.navbar-dark > button').on('click', function(){
    $('.navbar-dark').toggleClass('color-changed');
});
});

.navbar-dark.color-changed{
background-color:grey!important;
}

https://codepen.io/Vikaspatel/pen/QoaKOj

是否可以在Bootstrap 4中更改展开的导航栏的颜色？

3 个答案: