Bootstrap 不影响 Blazor 应用程序中的样式

问题描述 投票:0回答:1

我们将应用程序迁移到.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>
blazor bootstrap-5
1个回答
0
投票

class=".d-block .d-sm-none"
这些是无效的类,应该是
class="d-block d-sm-none"
,名称中不带句点

© www.soinside.com 2019 - 2024. All rights reserved.