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-system

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

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

Bootstrap导航器在我想要时不会折叠

2 个答案: