Bootstrap导航不会在我想要的时候崩溃

Question

默认情况下，当视口变窄到768px时，Bootstrap会折叠导航菜单。由于我的菜单项的宽度，我需要更快地折叠，在786标记附近，否则在767和786之间的宽度下，我会得到一个堆叠的菜单项，这有点难看。

我尝试将以下媒体查询添加到自定义样式表中：

@media (max-width: 786px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #f6fbfb;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #d7f1cf;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #d7f1cf;
        background-color: #95c58e;
    }
}

然而，这种风格似乎仍然来自bootstrap.min.css，这使它在767时崩溃。

网址：www.eamonngormley.com

如何强制问题并让它接受我的自定义媒体查询？或者我应该输入另一个媒体查询？

谢谢！

Answer 1

您可以使用!important强制使用样式。将代码更改为此

@media (max-width: 786px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #f6fbfb !important;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #d7f1cf !important;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #d7f1cf !important;
        background-color: #95c58e !important;
    }
}

这应该会强制使用样式，因为!important会覆盖任何其他CSS声明。

Answer 2

您可以使用http://getbootstrap.com/customize更改导航栏折叠的点。您要查找的部分位于此处：http://getbootstrap.com/customize/#grid-系统

找到@grid-float-breakpoint字段，并将其更改为您希望导航栏折叠/取消折叠的像素宽度。在这种情况下，如果你想要的话，你可以使用786px。或者，您可以使用像@screen-md这样的内置尺寸。

然后，滚动到底部并单击编译和下载按钮。这将下载您自定义的Bootstrap副本，然后您可以使用它来替换主题中的Bootstrab副本。