调整大小时，Bootstrap 4导航栏会更改项目颜色

Question

我遇到问题，当我调整浏览器大小时，B4导航栏会更改其项目字体颜色。不幸的是，我不能用任何例子复制它。这是一些图片。

初看：

调整大小后我想768宽度：

如您所见，它将颜色更改为黑色。知道为什么会这样吗？

由于

更新。 添加执行此操作的B4媒体查询：

/*Bootstrap overrides for toggle button when menu fully collapses*/
@media only screen and (max-width : 768px) {
    .navbar-collapse {
       background: white;
    }
    .nav-icon-text {
        color: black;
    }
    .navbar-inverse .navbar-nav> .Active {
        background-color: rgb(0,114,187);
    }
    .navbar-inverse .navbar-nav > li:hover {
        background-color: #ccc;
    }
    .navbar-inverse .navbar-nav > li > a:hover {
        background-color: transparent;
    }
}

我的导航栏不可折叠，我没有使用汉堡按钮。我可以阻止这种行为吗？

Answer 1

您有更多选择。首先是在

中的某个地方的bootstrap CSS中找到相应的css规则

@media all and (max-width:768px) {
}

更好的方法是通过浏览器检查DOM元素。单击右侧的navbar li元素，然后选择inspect元素选项。然后你可以看到，什么CSS规则应用于你的DOM元素，找到一个改变颜色并更改，删除，覆盖它的那个。

最糟糕的方法是使用！important flag

设置导航栏元素的颜色

为了测试响应度，您不必调整浏览器窗口的大小。只需在Firefox中按ctrl + shift + m或点击谷歌浏览器检查器中的移动设备图标。