Bootstrap CSS，如何使navbar-toggle始终可见？

Question

Bootstrap CSS，如何使navbar-toggle始终可见？

15

我想添加一个按钮，当在移动设备上时，它会显示出来，以打开导航栏中的折叠菜单，但是到目前为止还没有成功，这里是 less 代码和 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;
    }

我能看到它，但没有图标栏或边框。我会继续努力。我能看到它！

这是我想要展示它的方式：

- sathia

什么不起作用？你在手机上看到按钮吗？如果是，当你点击时会发生什么？ - Jacob Raccuia

1

我希望它始终可见，即使在桌面上也是如此，但它并不是这样的。 - sathia

好的，我发布的Less代码继承了.navbar-toggle类并覆盖了在超过768像素时隐藏它的媒体。 - sathia

我明白了。我对less不是很了解，这就解释了为什么之前的内容有点难以理解，但现在已经好多了。 - Jacob Raccuia

http://jsfiddle.net/vyzwfovr/ - sathia

显示剩余2条评论

6个回答

5

为什么不直接将类添加到toggler中？

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

- Alex Bogias

3

我不确定您是想添加另一个还是只需更改现有的一个。如果您想更改现有的一个，在默认/干净的Bootstrap安装中，应该这样做：

.navbar-toggle {
    display: block;
}

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

- Jo Smo

请解释一下你的答案。谢谢。 - Dropout

2

在普通的Bootstrap安装中，它们的通用CSS文件中有这一行CSS代码：

.navbar-toggle { display:none; }

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

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

- Jacob Raccuia

如我之前所回答的，我已经覆盖了那个部分，但我仍需要navbar-toggle像现在一样工作。 - sathia

1

“toggle”和“icon-bar”的颜色与“navbar-default”和“navbar-inverse”一起定义。因此，如果您尝试在自定义div上显示它们，则颜色也会随着“navbar-default” / “inverse”颜色方案一起删除。

请将以下内容添加到您的CSS中：

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

- AndrewL64

请提供您目前已有的jsfiddle，以便我也可以帮助下拉部分。 - AndrewL64

如果您能解释一下这个代码为什么有效，那就太好了！ - fotanus

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

因此我添加了icon-bar css falsarella哈哈。当bg-color被定义为我上面所示的那样时，这三行就会出现 :) - AndrewL64

0

在您的navbar-toggle中添加一个自定义类，比如navbar-toggle-visible，然后将这个规则添加到您的CSS中。

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

- dlimos

无法工作 - 尝试水平显示菜单 - HerGiz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sathia · Accepted Answer

经过一些测试，我成功地获得了所需的结果：

以下是更少的代码：

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