我们将应用程序迁移到.Net 8,Bootstrap 似乎没有像以前那样响应。我设置了一些测试 div 来检查。在我的索引页面中,我设置了一堆
div
,一次只显示一个。他们都表现出来了。
客户端\页面\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>
我正在使用 Bootstrap 5。bootstrap css 文件显示在浏览器的“源”选项卡中。我可以检查什么?
服务器\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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>
class=".d-block .d-sm-none"
这些是无效的类,应该是 class="d-block d-sm-none"
,名称中不带句点