Bootstrap导航崩溃

Question

我正在尝试让我的bootstrap导航栏以不同的宽度折叠，但更改

 //** Number of columns in the grid.
@grid-columns:                12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:           30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:       @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max:   (@grid-float-breakpoint - 1);

只是将它折叠成不同宽度的两行而不是折叠并显示汉堡包图标。还有什么我需要改变才能让它崩溃并显示图标吗？

我现在把它改为@ screen-md-min

它只是变形更多：/ ..我希望它打开和折叠的宽度是桌面的宽度，它是md类但它似乎根本不起作用：/

Answer 1

修改LESS variables中的variables.less响应断点设置在第200行附近：

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

然后在约232行使用 @ grid-float-breakpoint 变量设置导航栏的折叠值。默认情况下，它设置为 @ screen-tablet 。如果你想要，你可以使用像素值，但我更喜欢使用LESS变量。

OR

• 访问http://getbootstrap.com/customize/#less-variables
• 更改表单域中的@navbarCollapseWidth
• 自定义折叠点
• 自定义@ grid-float-breakpoint变量
• 点击＆＃34;编译和下载＆＃34;。

OR

只需使用CSS媒体查询即可。断点在这里是1280像素：

的 Demo

CSS

body {
    padding-top:70px;
}

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