Question

我正在使用Bootstrap4，并且我希望手机上具有可折叠的菜单，该菜单具有全宽度，并且与导航栏的颜色不同。

我已经在navbar-collapse上设置了背景色-到目前为止，效果很好。问题是导航栏具有填充，这意味着可折叠对象也要填充。如果我超越了导航栏类的填充，那么品牌和汉堡菜单将无法正确对齐。

这是我的标记：

<nav class="navbar bg-light navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
  <div class="container"> 
    <a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
    <button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span></button>
    <div class="navbar-collapse collapse show" id="collapseCoreNav" style="">
      <ul class="navbar-nav ml-auto">       
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
        </li>
       </ul>
    </div>
  </div>
</nav>

这个必须开箱即可使用，而无需我破解CSS？

Answer 1

要获取此信息，请不要使用默认的bg-light类-它应用！important，我们要避免...

我们可以使用简单的媒体查询来获取它吗？

有效的代码段：

nav {
  background-color: lightpink
}

@media screen and (max-width:595px) {
  nav {
    background-color: lightgreen
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<nav class="navbar  navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
  <div class="container">
    <a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
    <button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span></button>
    <div class="navbar-collapse collapse show" id="collapseCoreNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<s

全宽可折叠导航栏，颜色与主导航栏不同

1 个答案: