Question

我写了一个切换按钮的代码，当屏幕尺寸使用bootstrap4减少了导航栏上的浏览器，但没有请显示我的代码有什么问题：

<nav class="navbar navbar-expand-lg">
   <button class="navbar-toggler " data-toggle="collapse" data- 
      target="#navbarcollapse">
   <span class="navbar-toggler-icon" ></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarcollapse">
      <ul class ="navbar-nav mr-auto">
         <li class="nav-item  active"><a href="#"class="nav-link">Home</a></li>
         <li><a href="#" class="nav-link">Services</a></li>
         <li><a href="#"class="nav-link">Downloads</a></li>
         <li><a href="#"class="nav-link">Projects</a></li>
         <li><a href="#"class="nav-link">About Us</a></li>
         <li><a href="#"class="nav-link">Contact</a></li>
      </ul>
   </div>
</nav>

Answer 1

只需添加bg-light navbar-light，按钮就可见。

<nav class="navbar navbar-expand-lg bg-light navbar-light">
   <button class="navbar-toggler"  type="button" data-toggle="collapse" data-target="#navbarcollapse">
   <span class="navbar-toggler-icon" ></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarcollapse">
      <ul class ="navbar-nav">
         <li class="nav-item"><a href="#"class="nav-link">Home</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
         <li class="nav-item"><a href="#"class="nav-link">Downloads</a></li>
         <li class="nav-item"><a href="#"class="nav-link">Projects</a></li>
         <li class="nav-item"><a href="#"class="nav-link">About Us</a></li>
         <li class="nav-item"><a href="#"class="nav-link">Contact</a></li>
      </ul>
   </div>
</nav>

无法在导航栏中查看切换按钮

1 个答案: