在桌面视图上看到的切换按钮

时间:2018-01-22 07:04:25

标签: jquery css twitter-bootstrap twitter-bootstrap-4

<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>

使用上面的代码,我在桌面上查看页面时仍然可以看到切换按钮 toggle

2 个答案:

答案 0 :(得分:1)

尝试:使用 navbar-toggler 代替navbar-toggle类来获取按钮类

答案 1 :(得分:0)

您在切换按钮中使用了错误的班级名称。使用navbar-toggler代替navbar-toggle

  

Reference Link bootstrap4 navbar

Stack Snippet

<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>