当前，当浏览器宽度下降到768px以下时，导航栏会变为折叠模式。我想把这个宽度改为1000px，这样当浏览器低于1000px时，导航栏就会变成折叠模式。我想这样做没有使用较少，我使用触控笔不是较少。
我的问题和这个问题一样:引导3导航栏崩溃
但所有这些问题的答案都解释了如何通过改变LESS变量来实现。我没有处理较少，我使用手写笔，所以我想知道如何使用手写笔或其他方法。
谢谢!
当前回答
对于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;
}
}
其他回答
我刚刚通过使用下面的CSS代码成功地做到了这一点。
@media(max-width:1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse {
overflow-x: visible !important;
}
.navbar-collapse.in {
overflow-y: auto !important;
}
.collapse.in {
display: block !important;
}
}
这就是我成功的秘诀:
@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
这里我的工作代码使用在React与Bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-toggle{
display: block !important;
}
.navbar-header{
float: none;
}
}
</style>
在bootstrap3中，将这个变量@grid-float-breakpoint更改为您需要的值。默认值是768px
在Bootstrap 3 . less源代码中，变量中定义了一个变量。Less被称为@grid-float-breakpoint，它有以下有用的评论:
//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;
匹配的@grid-float-breakpoint-max值设置为- 1px:
//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);
解决方案:
所以只需将@grid-float-breakpoint的值设置为1000px，然后重新构建bootstrap。较少进入bootstrap.css:
e.g.
@grid-float-breakpoint: 1000px;
