有什么方法可以增加引导3导航栏崩溃的点(即,它崩溃成一个下拉的肖像平板)?
这两个适用于引导2,但不是现在!
如何改变导航栏崩溃阈值使用Twitter引导响应?
更改默认的响应式导航栏断点
有什么方法可以增加引导3导航栏崩溃的点(即,它崩溃成一个下拉的肖像平板)?
这两个适用于引导2,但不是现在!
如何改变导航栏崩溃阈值使用Twitter引导响应?
更改默认的响应式导航栏断点
当前回答
我今天也遇到了同样的问题。
引导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
其他回答
如果您面临的问题是菜单分解成多行,您可以尝试以下方法之一:
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变量的人。解决这个问题的两种常见方法。
我今天也遇到了同样的问题。
引导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
对于那些想要在小于标准768px的宽度处折叠(在小于768px的宽度处展开)的人,这是需要的css:
@media (min-width: 600px) {
.navbar-header {
float: left;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0 none;
box-shadow: none;
width: auto;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-nav {
float: left !important;
margin: 0;
}
.navbar-nav>li {
float: left;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
感谢Seb33300,我得到了这个工作。然而,一个重要的部分似乎被遗漏了。至少在Bootstrap 3.1.1版本中是这样。
我的问题是,导航栏在正确的宽度上相应地折叠,但菜单按钮不起作用。我无法展开和折叠菜单。
这是因为崩溃。In类被.navbar-collapse中的!important重写。也可以通过添加“Collapse .in”来解决。Seb33300的例子完成如下:
@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-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;
}
}
最简单的方法是自定义引导
发现变量:
@grid-float-breakpoint
它被设置为@screen-sm,您可以根据您的需要更改它。 希望能有所帮助!