Bootstrap 3导航栏折叠
有没有什么办法可以增加引导程序3导航栏折叠的点（也就是说，它可以折叠成纵向平板电脑上的下拉菜单）？
这两个适用于bootstrap 2，但现在不适用！
如何使用Twitter引导程序响应更改导航栏折叠阈值？
更改默认的响应式导航栏断点
我今天遇到了同样的问题。
Bootstrap 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">
Bootstrap 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尺寸， 1199px改为991px 。
演示
Bootstrap 2和Bootstrap 3之间的最大区别在于Bootstrap 3是“首先移动的”。
这意味着默认样式是为移动设备设计的，在Navbars的情况下，这意味着默认情况下会“折叠”，并在达到某个最小尺寸时“展开”。
Bootstrap 3的网站实际上有一个“暗示”：做什么：http://getbootstrap.com/components/#navbar
自定义折叠点
根据导航栏中的内容，您可能需要更改导航栏在折叠模式和水平模式之间切换的点。 自定义@ grid-float-breakpoint变量或添加自己的媒体查询。
如果你要重新编译你的LESS，你会在variables.less文件中找到指定的LESS变量。 它目前设置为通过Bootstrap 3术语“展开” @media (min-width: 768px) ，这是一个“小屏幕”（即平板电脑）。
@grid-float-breakpoint: @screen-tablet;
如果你想让折叠时间更长一点，你可以像这样调整它：
@grid-float-breakpoint: @screen-desktop; （992px断点）
或更快地扩大
@grid-float-breakpoint: @screen-phone （480px break-point）
如果您希望稍后扩展它，而不处理重新编译LESS，则必须覆盖在768px媒体查询中应用的样式，并让它们返回到先前的值。 然后在适当的时候重新添加它们。
我不确定是否有更好的方法来做到这一点。 根据您的需求重新编译Bootstrap是最好的（最简单的）方法。 否则，您将不得不查找影响导航栏的所有CSS媒体查询，将它们覆盖为768px宽度的默认样式，然后以较高的最小宽度恢复它们。
重新编译LESS将通过改变变量来为你做所有的魔术。 这是LESS / SASS预编译器的重点。 =）
（注意，我确实看完了它们，大概有100行代码，这让我感到非常烦恼，因为我放弃了这个想法，只是重新编译一个给定项目的Bootstrap，并避免意外地搞乱了某些东西）
我希望这有助于！
干杯!
最简单的方法是定制bootstrap
找到变量：
@grid-float-breakpoint
它被设置为@ screen-sm，您可以根据自己的需要进行更改。 希望能帮助到你！
链接地址: http://www.djcxy.com/p/15809.html