Bootstrap CSS，如何使始终可见的导航栏切换? [英] Bootstrap css, how to make always visible navbar-toggle?

问题描述

我想添加在移动设备上显示的那些按钮之一，以打开导航栏中的折叠菜单，但到目前为止还无法完成，这是较少的代码和html

I'd like to add one of those buttons that are shown when on mobile device in order to open the collapsed menu in the navbar, but haven't been able so far, here's the less code and 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>

进一步检查后，我发现该元素未隐藏，只是透明的，出于某种原因，如果我添加

upon further inspection I've noticed that the element is not hidden, it's just transparent, for some reason if I add

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

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

i see it fine, but withouth the icon-bar bars or the borders. I'll keep working on it

这就是我想要显示的方式:

and this is how I would like to show it:

推荐答案

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

After some tests I managed to obtain the desired results:

这是较少的代码:

.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像素才能看到它:

make sure you have at least 768px on the bottom right panel to see it:

http://jsfiddle.net/vyzwfovr/

这篇关于Bootstrap CSS，如何使始终可见的导航栏切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！