.NET 8 Blazor应用中Bootstrap样式失效排查求助

将应用迁移至.NET 8后，Bootstrap 5的响应式样式无法正常生效。在Index页面设置的多个测试div，预期应根据屏幕尺寸仅显示一个，但当前所有div均显示。浏览器Sources标签已确认Bootstrap CSS文件已加载，需排查以下内容：

client\Pages\Index.razor #

<div class=".d-block .d-sm-none">XS</div>
<div class=".d-none .d-sm-block .d-md-none">SM</div>
<div class=".d-none .d-md-block .d-lg-none">MD</div>
<div class=".d-none .d-lg-block .d-xl-none">LG</div>
<div class=".d-none .d-xl-block .d-xxl-none">XL</div>
<div class=".d-none .d-xxl-none">XXL</div>

server\App.razor #

<head>
    <meta charset="utf-8" />
    <base href="/" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <RadzenTheme Theme="standard" @rendermode="InteractiveWebAssembly" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" />
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/app.css" />
    <HeadOutlet @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
</head>

• 类名格式错误：所有Bootstrap类名前的.是多余的，正确写法应为d-block而非.d-block。类名带点会被浏览器识别为无效类，直接导致样式不生效。
• 缺失视口元标签：Bootstrap响应式功能依赖<meta name="viewport" content="width=device-width, initial-scale=1">，当前App.razor的<head>中未包含该标签，会导致媒体查询无法根据屏幕尺寸触发响应式规则。
• 样式优先级冲突：检查RadzenTheme、Blazor.Bootstrap与原生Bootstrap的样式加载顺序及优先级。若后续加载的框架样式（如blazor.bootstrap.css）覆盖了Bootstrap的响应式display类，会导致样式失效。可调整Bootstrap CSS的加载顺序至其他框架样式之后，或通过开发者工具Elements面板查看具体样式被覆盖情况。
• 自定义CSS干扰：检查css/app.css中是否存在全局display样式（如* { display: block !important; }），此类强制规则会覆盖Bootstrap的响应式类。
• Blazor渲染模式验证：确认InteractiveWebAssembly渲染模式下，样式是否在组件渲染前完全加载。可通过开发者工具Network面板检查CSS文件的加载完成时间，确保组件渲染时样式已就绪。
• 媒体查询生效情况：在浏览器开发者工具Elements面板中，查看对应div的样式，确认Bootstrap的媒体查询规则是否被正确应用。例如，在小屏幕下检查d-sm-none类是否触发了display: none。

内容的提问来源于stack exchange，提问作者M Kenyon II