有什么方法可以增加引导3导航栏崩溃的点(即，它崩溃成一个下拉的肖像平板)?
这两个适用于引导2，但不是现在!
如何改变导航栏崩溃阈值使用Twitter引导响应?
更改默认的响应式导航栏断点
当前回答
我想对jmbertucci的回答进行投票和评论，但我还不能被信任。我也遇到了同样的问题，并按照他说的解决了。如果你使用Bootstrap 3.0，编辑变量中的LESS变量。响应断点设置在第200行左右:
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
然后在第232行左右使用@grid-float-breakpoint变量为导航栏设置折叠值。默认设置为@screen-tablet。如果你愿意，你可以使用像素值，但我更喜欢使用LESS变量。
其他回答
我今天也遇到了同样的问题。
引导4
它是一个本地功能:https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors
你必须使用.navbar-expand{-sm|-md|-lg|-xl}类:
<nav class="navbar navbar-expand-md navbar-light bg-light">
引导3
@media (max-width: 991px) {
.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;
}
.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;
}
}
只需更改md尺寸的991px * 1199px。
Demo
我想对jmbertucci的回答进行投票和评论，但我还不能被信任。我也遇到了同样的问题，并按照他说的解决了。如果你使用Bootstrap 3.0，编辑变量中的LESS变量。响应断点设置在第200行左右:
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
然后在第232行左右使用@grid-float-breakpoint变量为导航栏设置折叠值。默认设置为@screen-tablet。如果你愿意，你可以使用像素值，但我更喜欢使用LESS变量。
如果您面临的问题是菜单分解成多行，您可以尝试以下方法之一:
1)尽量减少菜单项的数量或长度，如删除菜单项或缩短单词。
2)减少菜单项之间的填充，就像这样:
.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}
默认填充两边15px(左右)。
如果您更喜欢改变每个单独的用途:
padding-left: 7px;
padding-right: 8px;
此设置也会影响下拉列表。
这并没有回答问题，但它可以帮助那些不想乱动CSS或使用LESS变量的人。解决这个问题的两种常见方法。
我想我找到了一个简单的解决方案来改变折叠断点，只是通过css。
我希望其他人能确认，因为我没有彻底测试，我不确定这个解决方案是否有副作用。
您必须更改以下类定义的媒体查询值:
@media (min-width: BREAKPOINT px ){
.navbar-toggle{display:none}
}
@media (min-width: BREAKPOINT px){
.navbar-collapse{
width:auto;
border-top:0;box-shadow:none
}
.navbar-collapse.collapse{
display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
}
.navbar-collapse.in{
overflow-y:visible
}
.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
padding-left:0;padding-right:0
}
}
这是为我目前的项目工作，但我仍然需要改变一些css定义，以适当地安排所有屏幕大小的菜单。
希望这能有所帮助。
这些都是在变量中控制的，不需要在源代码中瞎折腾。使用自举，首先尝试变量，然后重写。然后返回并再次尝试变量;)
我使用bootstrap-sass与rails，但它与默认的LESS是一样的。
FILE: main.css.scss
-------------------
// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;
// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;
// then import your bootstrap
@import "bootstrap";
就是这样!这个变量参考页面非常方便:https://github.com/twbs/bootstrap/blob/master/less/variables.less
