Question

我使用以下代码更改了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

Answer 1

试试这个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;
}}

更改断点时，Bootstrap导航栏菜单会消失

1 个答案: