css - 在不使用 LESS 的情况下更改 Bootstrap 导航栏折叠断点

Question

目前，当浏览器宽度低于 768px 时，导航栏会变为折叠模式。我想将此宽度更改为 1000px，因此当浏览器低于 1000px 时，导航栏会更改为折叠模式。我想在不使用 LESS 的情况下执行此操作，我使用的手写笔不是 LESS。

我的问题与这个问题相同:Bootstrap 3 Navbar Collapse

但是该问题中的所有答案都解释了如何通过更改 LESS 变量来做到这一点。我没有处理 LESS，我正在使用手写笔，所以我想知道如何使用手写笔或其他方法完成此操作。

谢谢!

Answer 1

2018 年更新

Bootstrap 4

使用 navbar-expand-* 类在 Bootstrap 4 中更改导航栏断点更容易:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = xs 屏幕上的移动菜单<576px
• navbar-expand-md = sm 屏幕上的移动菜单 <768px
• navbar-expand-lg = md 屏幕上的移动菜单 <992px
• navbar-expand-xl = lg 屏幕 <1200px 上的移动菜单
• navbar-expand = 从不使用移动菜单
• (no expand class) = 始终使用移动菜单

如果您排除 navbar-expand-*，移动菜单将以 all 宽度使用。这是所有 6 种导航栏状态的演示:Bootstrap 4 Navbar Example

您还可以通过添加一点 CSS 来使用自定义断点 (???px)。例如，这里是 1300px..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Custom Navbar Breakpoint
Bootstrap 4 Navbar Breakpoint Examples

---

** Bootstrap 3**

对于 Bootstrap 3.3.x，这是覆盖导航栏断点的有效 CSS。将 991px 更改为您希望导航栏折叠的点的像素尺寸...

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

991px 的工作示例:http://www.bootply.com/j7XJuaE5v6
1200 像素的工作示例:https://www.codeply.com/go/VsYaOLzfb4(带有搜索表单)

注意:以上适用于超过 768px 的任何内容。如果您需要将其更改为小于 768px example of less than 768px is here 。

---