当前,当浏览器宽度下降到768px以下时,导航栏会变为折叠模式。我想把这个宽度改为1000px,这样当浏览器低于1000px时,导航栏就会变成折叠模式。我想这样做没有使用较少,我使用触控笔不是较少。

我的问题和这个问题一样:引导3导航栏崩溃

但所有这些问题的答案都解释了如何通过改变LESS变量来实现。我没有处理较少,我使用手写笔,所以我想知道如何使用手写笔或其他方法。

谢谢!


当前回答

现在Bootstrap 4.4支持它

navbar-expand-sm 

其他回答

最好的办法是使用您所使用的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为你想要的设计。

这就是我成功的秘诀:

@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;
}

在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;

这里我的工作代码使用在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>