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

在正常的bootstrap安装中，在他们的通用css文件中找到了这行css：

.navbar-toggle { display:none; }

为了让按钮始终显示，您需要在自定义CSS中添加此行代码。如果您的样式表在他们之后应用，它将覆盖它。

.navbar-toggle { display:block; } // the !important isn't necessary

Answer 3

我不确定您是否要添加另一个，或者是否足以更改现有的一个。我的情况，你想改变现有的，在默认/干净的bootstrap安装，这个节目做它：

.navbar-toggle {
    display: block;
}

.navbar-collapse.collapse {
    display: none !important;
}

Answer 4

切换和图标栏的颜色与navbar-default以及navbar-inverse一起定义。因此，如果您尝试在自定义div上显示它们，颜色也会随着navbar-default / inverse颜色方案一起被删除。

将此添加到您的css：

.navbar-toggle {
    background-color: transparent;
}
.icon-bar {
    background-color:#333;
}

Answer 5

将自定义类添加到导航栏切换，例如navbar-toggle-visible，然后将此规则添加到您的css

  @media (min-width: 768px) {
  .navbar-toggle-visible {
    display: inline;
  }