Question

我一直试图让小屏幕的切换下拉列表与常规导航栏具有相同的背景但是我不能为我的生活找出如何定位它。我错过了一个bootstrap类，还是我的代码中出现错误？我原本以为边框导致了错误，因为我在插入之后很快发现了这个问题，但删除它什么也没做。

HTML ...

<nav class="navbar fixed-top navbar-expand-md" id="lp-navbar">
      <div class="container">
           <a class="navbar-brand" href="#home"><img class="img-fluid" src="img/logo.png" alt="Logo"></a>
            <button class="navbar-toggler navbar-toggler-right" 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>

          <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
               <ul class="navbar-nav">
                  <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                  <li class="nav-item"><a class="nav-link" href="#menu">Menu</a></li>
                  <li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
                  <li class="nav-item"><a class="nav-link" href="#order-online">Order</a></li>
                  <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
              </ul> 
         </div>                    
    </div><!-- /.container -->
</nav><!--nav-->

... CSS

/* Navbar */
.navbar {
border: none;
border-radius: 0;
margin-bottom: 0;
background-color: transparent;
height: 75px;
}

.navbar.scroll-navbar {
    top: 0;
    border-bottom: 7px solid #b94335;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, .8);
}


.navbar-expand-md .navbar-nav .nav-link  {
    color: #000;
    font-size: 20px;
    line-height: 25px;
    padding: 5px 50px;
}

.navbar-nav .active>.nav-link, 
.navbar-nav .nav-link.active, 
.navbar-nav .nav-link.open,
.navbar-nav .open>.nav-link,
.navbar-nav .nav-link:focus, 
.navbar-nav .nav-link:hover {
    color: #b94335;
}

.navbar-brand img {
    max-width: 200px;
}

.navbar-toggler-right {
    cursor: pointer;
    top: 5px;
    padding: 3px 6px;
    border: 1px solid #fff;
}

.navbar-toggler-icon {
    position: relative;
    text-align: center;
}

.navbar-toggler-icon:before {
    position: absolute;
    top: 3px;
    left: 5px;
    color: #fff;
    content: "\f0c9";
    font-family: "fontawesome";
    font-size: 25px;
    font-weight: 900;
}

@media(max-width:768px) {
    .navbar {
        height: 105px;
    }
}

Answer 1

@media(max-width:768px) {
    .navbar {
        height: auto;
    }
    #navbarNav{
        background: black;
    }
}

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

Bootstrap 4 Toggler Dropdown没有背景

1 个答案: