Question

我正在尝试实现自定义断点以在1050折叠导航栏。我的导航栏在移动视图和桌面视图上完美运行，但在平板电脑视图菜单栏上显示为两行。我已经实现了下面提到的代码，但它也无法正常工作。请帮忙！

enter code here
@media (max-width: 990px) {
    .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;
    }
 }

Answer 1

试试这个

@media (max-width: 1050px) { /*Custom breakpoint*/
 .navbar-header {
 float: none;
}
 .navbar-toggle {
display: inline-block;
margin: 0;
position:absolute;
right:0;
top:-10px;
}
 .navbar-collapse.collapse.in {
 display: block!important;
}
 .collapsing {
 overflow: hidden!important;
}
 .navbar-collapse.collapse {
 display: none!important;
}
 .navbar-collapse {
margin-top: 15px;
 margin-bottom: 20px;
}
 .navbar-nav {
 float: none!important;
 margin: 0;
}
 .navbar-nav>li {
 float: none;
}
 .navbar-nav>li>a {
 padding-top: 10px;
 padding-bottom: 10px;
}
 .navbar-nav .open .dropdown-menu {
 position: static;
 float: none;
 width: auto;
 margin-top: 0;
 border: 0;
}
}

如何在bootstrap导航栏上实现自定义断点

1 个答案: