当我想要它时，引导导航不会崩溃答案

【问题标题】：Bootstrap nav not collapsing when I want it to当我想要它时，引导导航不会崩溃
【发布时间】：2015-03-24 04:12:41
【问题描述】：

默认情况下，当视口小于 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

如何强制问题并让它接收我的自定义媒体查询？还是我应该输入不同的媒体查询？

谢谢！

【问题讨论】：

查看此网站并尝试自定义代码以满足您的需求：work.smarchal.com/twbscolor

标签： html css twitter-bootstrap

【解决方案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 声明。

【讨论】：

【解决方案2】：

您可以使用http://getbootstrap.com/customize 更改导航栏的折叠点。您要查找的部分在这里：http://getbootstrap.com/customize/#grid-system

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

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

【讨论】：