当前，当浏览器宽度下降到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;
}
}
其他回答
在bootstrap3中，将这个变量@grid-float-breakpoint更改为您需要的值。默认值是768px
除了@Skely answer，要使导航栏内的下拉菜单工作，也添加他们的类被覆盖。最终代码如下:
@media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.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;*/
margin: 7.5px 50px 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;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
演示代码
最好的办法是使用您所使用的CSS处理器的一个端口。
我是SASS的忠实粉丝，所以我目前使用https://github.com/thomas-mcdonald/bootstrap-sass
看起来这里有一个Stylus的叉子:https://github.com/Acquisio/bootstrap-stylus
否则，搜索和替换是你最好的朋友在css版本…
你必须为此写一个特定的媒体查询，从你的问题，低于768px，导航栏会崩溃，所以应用它高于768px和低于1000px，就像这样:
@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
这将隐藏导航栏折叠，直到引导单元默认出现。当折叠类翻转内部资产在导航栏折叠将自动隐藏，明智的你必须设置你的css为你想要的设计。
我刚刚通过使用下面的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;
}
}
