当前，当浏览器宽度下降到768px以下时，导航栏会变为折叠模式。我想把这个宽度改为1000px，这样当浏览器低于1000px时，导航栏就会变成折叠模式。我想这样做没有使用较少，我使用触控笔不是较少。
我的问题和这个问题一样:引导3导航栏崩溃
但所有这些问题的答案都解释了如何通过改变LESS变量来实现。我没有处理较少，我使用手写笔，所以我想知道如何使用手写笔或其他方法。
谢谢!
当前回答
最好的办法是使用您所使用的CSS处理器的一个端口。
我是SASS的忠实粉丝，所以我目前使用https://github.com/thomas-mcdonald/bootstrap-sass
看起来这里有一个Stylus的叉子:https://github.com/Acquisio/bootstrap-stylus
否则，搜索和替换是你最好的朋友在css版本…
其他回答
对于Bootstrap 3.3，这是你唯一需要的代码:
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-toggle{
display: block !important;
}
.navbar-header{
float: none;
}
}
这对我很有效
@media (min-width: 768px) {
.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-collapse.collapse.in {
display: block!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-collapse.collapse {
display: none!important;
}
.navbar-collapse.collapse.in {
display: block!important;
}
最好的办法是使用您所使用的CSS处理器的一个端口。
我是SASS的忠实粉丝，所以我目前使用https://github.com/thomas-mcdonald/bootstrap-sass
看起来这里有一个Stylus的叉子:https://github.com/Acquisio/bootstrap-stylus
否则，搜索和替换是你最好的朋友在css版本…
Sass改变引导变量的方法实际上在bootstrap- Sass github页面上有文档。
只需在@import bootstrap之前重新定义变量:
$grid-float-breakpoint: 1000px;
@import 'bootstrap';
2018年更新
引导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 =从不使用手机菜单 (没有扩展类)=总是使用移动菜单
如果排除navbar-expand-*，移动菜单将在所有宽度下使用。下面是所有6个导航栏状态的演示
您还可以通过添加一些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;
}
}
引导4自定义导航栏断点 引导4导航栏断点示例
**Bootstrap 3**
用于引导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 1200px的工作示例:https://www.codeply.com/go/VsYaOLzfb4(带有搜索表单)
注意:以上适用于任何超过768px的东西。如果您需要将其更改为小于768px，则小于768px的示例如下。
