引导导航崩溃

Question

我试图让我的引导导航栏以不同的宽度折叠，但改变了

 //** 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

编辑variables.less中的LESS variables 响应断点设置在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 变量。

或

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

或

您只需使用 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;
    }
}