在桌面视图上看到的切换按钮
toggle button seen on desktop view
<nav class="navbar navbar-expand-md navbar-light bg-primary">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
</ul>
</div>
</nav>
使用上面的代码,我在桌面上查看页面时仍然可以看到切换按钮
尝试:代替 navbar-toggle class 使用 navbar-toggler 作为按钮 class
您在切换按钮中使用了错误的 class 名称。使用 navbar-toggler
而不是 navbar-toggle
堆栈片段
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-primary">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-primary">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
</ul>
</div>
</nav>
使用上面的代码,我在桌面上查看页面时仍然可以看到切换按钮
尝试:代替 navbar-toggle class 使用 navbar-toggler 作为按钮 class
您在切换按钮中使用了错误的 class 名称。使用 navbar-toggler
而不是 navbar-toggle
堆栈片段
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-primary">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
</ul>
</div>
</nav>