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

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

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

谢谢!


当前回答

这就是我成功的秘诀:

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

其他回答

最好的办法是使用您所使用的CSS处理器的一个端口。

我是SASS的忠实粉丝,所以我目前使用https://github.com/thomas-mcdonald/bootstrap-sass

看起来这里有一个Stylus的叉子:https://github.com/Acquisio/bootstrap-stylus

否则,搜索和替换是你最好的朋友在css版本…

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

这对我很有效

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

你必须为此写一个特定的媒体查询,从你的问题,低于768px,导航栏会崩溃,所以应用它高于768px和低于1000px,就像这样:

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

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

现在Bootstrap 4.4支持它

navbar-expand-sm