显示导航栏折叠按钮的最小宽度（浏览器）

Question

我们可以设置浏览器的宽度来显示bootstrap中导航栏的折叠按钮吗？ 我认为媒体查询可以帮助我...但我不知道设置浏览器窗口的最小宽度

Answer 1

您可以使用媒体查询。例如，这会使折叠按钮切换为1280像素。

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

Bootply示例：http://bootply.com/98488

Answer 2

如果您使用的是bootstrap-3，则可以使用col

<div class="col-md-8">.col-md-8</div>

了解详情http://getbootstrap.com/css/

Answer 3

转到http://getbootstrap.com/customize/ @ grid-float-breakpoint是此屏幕截图中的最后一个字段，在那里你可以输入断点（@ screen-sm-min - 768px，@ screen-mid-min - 992px ）您希望菜单转换为折叠版本的位置。