我正在尝试组合一个 Bootstrap 导航栏,该导航栏在移动设备上显示时会折叠。
我一直在学习教程,但由于某种原因,当我减小窗口大小时,导航栏消失而不是折叠。谁能看到我哪里出错了。
我在标题中按此顺序使用以下内容:
bootstrap.css Bootstrap v4.0.0
jquery-3.2.1.min.js
bootstrap.min Bootstrap v4.0.0
我的代码:
<nav class="navbar navbar-expand-md sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu1">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-target="#facilities">Facilities</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#benefits">Benefits</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#spinaltherapy">Equine Spinal Therapy</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#contact">Contact and location</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#workwith">Who we work with</a>
</li>
</ul>
</div>
</nav>
答案 0 :(得分:1)
问题在于,使其可见的切换器样式不会被应用,除非它在 .navbar-light
或 .navbar-dark
即:
.navbar-light .navbar-toggler-icon {
background-image: escape-svg($navbar-light-toggler-icon-bg);
}
所以只需添加 .navbar-light
,您就可以看到按钮和图标。还可以考虑使用 .bg-light
或将 .navbar-dark.bg-dark
用于深色导航栏。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu1">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-target="#facilities">Facilities</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#benefits">Benefits</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#spinaltherapy">Equine Spinal Therapy</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#contact">Contact and location</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#workwith">Who we work with</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>