ASP.NET网站Header在特定像素区间显示异常的修复求助

核心思路 #

直接强制该区间使用移动端导航样式，通过调整Bootstrap导航栏断点配置+自定义CSS覆盖默认规则，解决显示错乱问题。

具体步骤 #

1. 调整导航栏展开断点
   找到_layout.cshtml中导航栏的根<nav>标签，确保它的类包含navbar-expand-xl（而非navbar-expand-lg或更小断点类）。示例代码：

   <nav class="navbar navbar-expand-xl navbar-light bg-white">
     <!-- 导航栏内部内容（品牌、折叠按钮、菜单列表等） -->
   </nav>
   

   这个类的作用是让导航栏仅在屏幕宽度≥1200px时展示PC端展开样式，小于1200px时自动切换为移动端折叠样式，刚好覆盖你出问题的576px-1199px区间。

2. 添加自定义CSS强制覆盖样式
   如果调整断点后仍有显示异常，在_layout.cshtml的<head>标签末尾添加以下自定义样式（必须放在Bootstrap样式引用之后，保证优先级）：

   <style>
     /* 针对576px-1199px区间的移动端样式强制覆盖 */
     @media (min-width: 576px) and (max-width: 1199.98px) {
       /* 强制显示折叠按钮 */
       .navbar-toggler {
         display: block !important;
       }
       /* 默认状态下收起导航菜单 */
       .navbar-collapse.collapse {
         display: none !important;
       }
       /* 点击折叠按钮后展开菜单 */
       .navbar-collapse.collapse.show {
         display: block !important;
       }
       /* 菜单改为移动端垂直排列 */
       .navbar-nav {
         flex-direction: column !important;
         padding-top: 0.5rem;
       }
       /* 清除PC端横向间距 */
       .nav-item {
         margin-left: 0 !important;
       }
     }
   </style>
   

   这里的!important用于强制覆盖Bootstrap的默认样式，适配你提到的运行时生成的bootstrap.min.css场景。

3. 排查额外冲突样式
   检查_layout.cshtml内的其他自定义CSS，或页面引入的外部样式文件，看是否存在针对576px-1199px区间的规则导致显示错乱，可通过注释代码逐一排查。

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