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

目前，当浏览器宽度降至768px以下时，导航栏将更改为折叠模式。 我想将此宽度更改为1000px，因此当浏览器低于1000px时，导航栏会更改为折叠模式。 我想在不使用LESS的情况下做到这一点，我使用的是手写笔而不是LESS。

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

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

谢谢！

---

你必须为你的问题编写一个特定的媒体查询 ，在768px以下，导航栏会崩溃，所以应用它在768px以上和1000px以下，就像这样：

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

这将隐藏导航栏折叠，直到引导单元的默认出现。 当崩溃类翻转导航栏内的内部资产时，崩溃将自动隐藏，就像明智的你必须设置你的CSS为你想要的设计。

---

2018年更新

Bootstrap 4

在Bootstrap 4中，使用navbar-expand-*类更改导航栏断点更简单：

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

您也可以通过添加一点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 .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4自定义导航栏断点
Bootstrap 4 Navbar断点示例

---

Bootstrap 3

对于Bootstrap 3.3.x，这里是覆盖navbar断点的工作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
工作示例为1200px：https://www.codeply.com/go/VsYaOLzfb4（带搜索表单）

注意：上述内容适用于超过768px的任何内容。 如果您需要将其更改为小于768像素 ，则小于768像素的示例位于此处。

---

---

在bootstrap3中 ，将此变量@ grid-float-breakpoint更改为您需要的变量。 默认值是768px

链接地址: http://www.djcxy.com/p/89461.html

上一篇: Change bootstrap navbar collapse breakpoint without using LESS

下一篇: How to add a search box with icon to the navbar in Bootstrap 3?