默认情况下,当视口(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 处崩溃。
我怎样才能强制这个问题并让它接收我的自定义媒体查询?或者我应该输入不同的媒体查询吗?
谢谢!
最佳答案
您可以使用 !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 声明。
关于html - Bootstrap 导航在我想要的时候不会折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29202757/