Bootstrap 3 Navbar折叠-更改特定导航栏的断点

本文介绍了Bootstrap 3 Navbar折叠-更改特定导航栏的断点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何更改特定导航栏（而非所有导航栏）的折叠断点。

How to change breakpoint for collapse for a specific navbar, not all navbars.

我希望此导航栏以500px折叠：

I want this navbar to collapse at 500px:

  <ul class="navbar-collapse-500 nav navbar-nav">
    <li class="active">
      <a href="#">Link1</a>
    </li>
    <li>
      <a href="#">Link2</a>
    </li>
    <li>
      <a href="#">Link3</a>
    </li>
    <li></li>
  </ul>

我想为类.navbar-collapse-500添加CSS样式，这将增加500px的折叠并且不要触摸标准navbar-nav类的折叠断点。

I want to add CSS style for my class .navbar-collapse-500 which will add collapsing for 500px and do not touch collapse breakpoint for standard navbar-nav class.

推荐答案

为什么不将其添加到CSS文件：

Why not just add this to your CSS file:

@media (max-width: 500px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

这篇关于Bootstrap 3 Navbar折叠-更改特定导航栏的断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

bootstrap