创建导航栏时@media规则失效，请求排查代码问题

你的媒体查询规则看似没问题，但实际不生效主要有几个关键原因：

1. 伪元素定位基准缺失 #

.nav-link 默认是行内元素，你给它的伪元素设置了 position:absolute，但没有给父元素 .nav-link 添加 position:relative。此时绝对定位的伪元素会相对于最近的已定位祖先（比如导航栏容器）来定位，而不是 .nav-link，导致你看不到预期的下划线效果。

2. 媒体查询断点与Bootstrap组件不匹配 #

Bootstrap的 navbar-expand-lg 组件触发展开的断点是 min-width:992px，但你用的是 min-width:991px。这会导致在991px宽度时，导航栏还处于折叠状态（使用侧边栏），但媒体查询已经生效，伪元素的效果不会在折叠菜单里显示，造成“不生效”的错觉。

3. 重复引入样式文件 #

页面末尾重复引入了 bootstrap.min.css，这可能导致样式优先级冲突，干扰自定义CSS的生效。

4. 冗余兼容脚本 #

css3-mediaqueries.js 是用于兼容IE8及以下老旧浏览器的，现在主流浏览器原生支持媒体查询，这个脚本不仅没必要，还可能引发不必要的问题。

修改后的关键代码示例： #

.nav-link {
    color: #666777;
    font-weight: 500;
    position: relative; /* 添加相对定位，让伪元素以当前链接为基准 */
}

/* 匹配Bootstrap lg断点，确保导航栏展开时才生效 */
@media screen and (min-width: 992px) {
    .nav-link::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: orange;
        visibility: hidden;
        transition: 0.3s ease-in-out;
    }

    .nav-link:hover::before,
    .nav-link.active::before {
        width: 100%;
        visibility: visible;
    }
}

额外优化建议： #

• 删除页面末尾重复的 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
• 移除 <script type="text/javascript" src="css3-mediaqueries.js"></script>（如果不需要兼容老旧IE）

内容的提问来源于stack exchange，提问作者mehmed aras