html - Bootstrap 导航在我想要的时候不会折叠

Question

默认情况下，当视口(viewport)小于 768 像素时，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 声明。