Bootstrap:如何更早地折叠导航栏

Question

我想以早于768px的分辨率折叠我的导航栏,例如992px,我该怎么做？谢谢!(我知道我可以在引导页面上自定义它,但我不想用新的bootstrap.css文件重新启动我的项目)

Answer 1

如果您不想使用Less/Sass操作Bootstrap(可能是因为您想通过CDN加载它),这就是我的诀窍:

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}

演示:https://jsfiddle.net/0pmy8usr/

将其添加到单独的CSS文件中,并在bootstrap.css之后包含它

Bootstrap 4的更新:

@media(max-width:900px) {
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .nav-item{width:100%;text-align:left;} 
  .navbar-toggler {display: block !important;}
  .navbar-toggleable-sm.collapse {display:none !important}
  .navbar-toggleable-sm.collapse.in {display:block !important}
}

演示:https://jsfiddle.net/mkvhbgnp/3/

Answer 2

在variables.less,改变

@grid-float-breakpoint:   @screen-sm-min

至

@grid-float-breakpoint: @screen-md-min;  

Answer 3

如果您需要以早于768px的分辨率折叠导航栏,那么您将需要使用@media min-width 和max-width,并且您不需要为此创建新项目,只需创建新的.css文件(例如:custom.css)和插入它在你的主bootstrap.css下覆盖它的值.并在其中编写此代码:

码:

@media (min-width: 992px) {
   .collapse {
       display: none !important;
   }
}

另外,你可以看一下这篇文章:更改bootstrap navbar collapse.

我希望这会给你解决方案.