Twitter Bootstrap 3 导航栏折叠 - 将宽度设置为折叠 [英] Twitter Bootstrap 3 navbar-collapse - set width to collapse

问题描述

我使用带有 navbar-collapse 的 Twitter Bootsrap 3:http://bootply.com/91119

I use Twitter Bootsrap 3 with navbar-collapse : http://bootply.com/91119

当你缩小页面的宽度时，菜单会分成两行，然后折叠起来.我没有分成两行，但想做折叠.我该怎么办?

When you reduce the width of the page, the menu splits into two lines, and subsequently collapse. I do no splits into two lines, but want to do collapse. What do I do?

推荐答案

您可以减少导航栏折叠的点..

You can decrease the point at which the navbar collapses..

选项 1

来自 Bootstrap 文档 (http://getbootstrap.com/components/#navbar)

From the Bootstrap docs (http://getbootstrap.com/components/#navbar)

根据导航栏中的内容，您可能需要更改导航栏在折叠和水平模式之间切换的点.自定义@grid-float-breakpoint 变量或添加您自己的媒体查询.

Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

选项 2

如果您不想要自定义 Bootstrap 构建，则可以使用 CSS 媒体查询.例如，这里将断点设置为 1280 像素:

If you don't want a custom Bootstrap build, you can use a CSS media query. For example here is setting the breakpoint a 1280 pixels:

@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;
    }
}

http://www.bootply.com/98488

Bootstrap 3.1 更新

3.1 中的导航栏发生了变化，因此覆盖断点的 CSS 与 3.0 不同.这将防止导航栏在 3.1 中显示然后突然折叠http://www.bootply.com/120604

The navbar in 3.1 has changed, so the CSS to override the breakpoint is different than 3.0. This will prevent the navbar from showing and then suddenly collapsing in 3.1 http://www.bootply.com/120604

这篇关于Twitter Bootstrap 3 导航栏折叠 - 将宽度设置为折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！