Bootstrap css，如何使导航栏切换始终可见？

我想添加在移动设备上显示的按钮之一，以便打开导航栏中的折叠菜单，但到目前为止还无法做到，这里是较少的代码和 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;
    }

我觉得很好，但没有图标栏或边框。我会继续努力

这就是我想展示的方式：

经过一些测试，我设法获得了预期的结果：

这是更少的代码：

.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/ http://jsfiddle.net/vyzwfovr/