我正在使用 BlazorStrap 导航栏。当显示屏宽度减小时，会显示切换按钮。 问题是现在点击它不会打开菜单。
我创建了一个 Blazor 服务器应用程序
dotnet new blazor -o BlazorIndNone -au Individual -int Server
dotnet add package blazorstrap
dotnet add package blazorstrap.V5
程序.cs：
using BlazorStrap;
builder.Services.AddBlazorStrap(options =>
{
options.ShowDebugMessages = true;
});
app.razor：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="BlazorApp3.styles.css" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<script src="_content/BlazorStrap/popper.min.js"></script>
<script src="_content/BlazorStrap/blazorstrap.js"></script>
</body>
</html>
nav.razor 来自 https://blazorstrap.io/V5/V5/components/navbar
<BSNavbar Color="BSColor.Light">
<BSContainer Container="Container.Fluid">
<BSNavbarBrand>Navbar</BSNavbarBrand>
<BSCollapse IsInNavbar="true">
<Toggler>
<BSNavbarToggle />
</Toggler>
<Content>
<BSNav MarginEnd="Margins.Auto" MarginBottom="Margins.Small" Class="mb-lg-0">
<BSNavItem IsActive="true" Url="javascript:void(0);">Home</BSNavItem>
<BSNavItem Url="javascript:void(0);">Link</BSNavItem>
<BSNavItem IsDropdown="true">
<BSDropdown IsNavPopper="true" Placement="Placement.BottomEnd">
<Toggler><BSToggle IsNavLink="true">Dropdown</BSToggle></Toggler>
<Content>
<BSDropdownItem Url="javascript:void(0);">Action</BSDropdownItem>
<BSDropdownItem Url="javascript:void(0);">Another action</BSDropdownItem>
<BSDropdownItem IsDivider="true" />
<BSDropdownItem Url="javascript:void(0);">Something else here</BSDropdownItem>
</Content>
</BSDropdown>
</BSNavItem>
<BSNavItem Url="javascript:void(0);" IsDisabled="true">Disabled</BSNavItem>
</BSNav>
</Content>
</BSCollapse>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<BSButton Color="BSColor.Success" IsOutlined="true">Search</BSButton>
</form>
</BSContainer>
</BSNavbar>
这是因为这个导航栏需要交互式渲染模式才能工作。您需要将 App.razor 更改为
<HeadOutlet @rendermode="InteractiveServer" />
...
<Routes @rendermode="InteractiveServer" />
如果你检查原始内置模板导航栏，你会发现它使用纯 javascript 进行切换功能，可以在 SSR 中工作。
onclick="document.querySelector('.navbar-toggler').click()"
但是这个引导导航栏不是纯 JavaScript，因此需要交互模式才能激活。