twitter-bootstrap - 引导 3.0 @navbarCollapseWidth

Question

navbar-collapse min-width: 767px

我想要导航栏折叠max-width: 991px，在自定义页面中我找不到@navbarCollapseWidth

这是 bootstrap 3.0，我的导航对于 767 来说太大了，我希望它早点崩溃。

Answer 1

1. 从https://github.com/bassjobsen/jamedo-bootstrap-start-theme/archive/master.zip下载最新版本
2. 此 zip 包含 Less 文件 open less/variables.less

该文件包含以下行：

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-tablet;

将其更改为：

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     992px;

1. 重新编译您的 css 文件 ( >>lessc less/bootstrap.less) 文件或重建 Bootstrap ( grunt dist)

Answer 2

折叠模式下的下拉菜单仍然存在问题，其尺寸介于@screen-tablet您放置的尺寸@grid-float-breakpoint（在本例中为 992）之间。

我认为下拉媒体查询没有使用一个错误，@grid-float-breakpoint而是@screen-xs-max在 nabar.less 文件中引用。

如果你也覆盖它，你会得到正确的下拉菜单和折叠点。

代替

.navbar-nav {
    @media (max-width: @screen-xs-max) {
        // Dropdowns get custom display when collapsed
    .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;

        > li > a,
        .dropdown-header {
            padding: 5px 15px 5px 25px;
        }

        > li > a {
            line-height: @line-height-computed;

            &:hover,
            &:focus {
                background-image: none;
            }
        }
    }
}
}

利用

.navbar-nav {
    @media (max-width: @grid-float-breakpoint) {
        // Dropdowns get custom display when collapsed
        .open .dropdown-menu {
           position: static;
           float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;

        > li > a,
        .dropdown-header {
            padding: 5px 15px 5px 25px;
        }

        > li > a {
            line-height: @line-height-computed;

            &:hover,
            &:focus {
                background-image: none;
            }
        }
    }
}
}