Bootstrap css,如何使总是可见的navbar-toggle？

Question

我想添加其中一个在移动设备上显示的按钮,以便在导航栏中打开折叠菜单,但到目前为止还没有,这里是更少的代码和HTML

  .navbar-toggle-always{

    .navbar-toggle;

    @media (min-width: 768px){
      display: block!important;
    }

    .zero-margins;

  }

HTML

      <div class="pull-left ">
        <button type="button" class="navbar-toggle-always collapsed" data-toggle="collapse" data-target="#left" aria-expanded="false" aria-controls="navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

经过进一步的检查,我注意到元素没有被隐藏,它只是透明的,出于某些原因,如果我添加

    @media (min-width: 768px){
      display: block!important;
      background-color:pink;
    }

我觉得很好,但没有图标栏条或边框.我会继续努力

这就是我想表达的方式:

Answer 1

经过一些测试后,我设法获得了预期的结果:

这里的代码越少:

.navbar-inverse {

  .navbar-toggle-always {
    border-color: @navbar-inverse-toggle-border-color;
    &:hover,
    &:focus {
      background-color: @navbar-inverse-toggle-hover-bg;
    }
    .icon-bar-always {
      background-color: @navbar-inverse-toggle-icon-bar-bg;
    }
  }
}

.navbar-toggle-always{

  .navbar-toggle;

  @media (min-width: 768px){
    display: block!important;
    background-color: transparent;
    border:1px solid #333333;
  }

  .zero-margins;

  .icon-bar-always {
    .icon-bar;
    border:1px solid #fff;
    display: block;
    border-radius: 1px;
  }

  .icon-bar-always + .icon-bar-always {
    margin-top: 4px;
  }
}

确保右下方面板上至少有768像素才能看到它:

http://jsfiddle.net/vyzwfovr/

Answer 2

为什么不直接d-block向切换器添加类呢？

<button class="navbar-toggler d-block" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>