gpt4 book ai didi

css - Bootstrap 导航栏菜单在更改断点时消失

转载 作者:行者123 更新时间:2023-11-28 05:26:15 27 4
gpt4 key购买 nike

我使用以下代码更改了 Bootstrap 导航栏的断点:

@media (max-width: 1000px) {
.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;
overflow-y: auto;
}
.collapsing {
overflow: hidden!important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}

我的问题是,在 768px 和新断点之间,菜单超出了导航容器,我希望它的行为像在移动设备中一样(留在容器内并添加垂直滚动条)。我可能错过了一些 css 但不知道是什么 :(

编辑:这里有 jsfiddle https://jsfiddle.net/nato522/e71e8bfd/

EDIT2:还有一张图片来显示问题 navbar issue

最佳答案

试试这个 CSS:

@media (max-width: 1000px) {
.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;
overflow-y: auto!important;
overflow-x: hidden!important;
}
.collapsing {
overflow: hidden!important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}}

关于css - Bootstrap 导航栏菜单在更改断点时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38761973/

27 4 0