Question

这是我简单的导航栏。问题是我有太多菜单项，宽度低于~840px，菜单项放错了地方。

图像显示3种宽度的情况： https://youtu.be/xIspOX9FuVU?t=1m43s 宽度：850px 宽度：767px 宽度：769px

显然第二个就是问题。

如何更改导航栏的“断点”并增加显示{{1}}的宽度（不破坏整个站点的设计）？

{{1}}

Answer 1

正如本网站https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint所提到的（感谢作者）你应该改变bootstrap断点的大小，这是bootstrap 3.1的一个例子：

@media (max-width: 850px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

Bootstrap导航栏太长了

1 个答案: