有没有办法在 Blazor 应用程序中最小化(隐藏)默认侧边栏(导航菜单)。 我确实使用 .Net core 3.1 模板创建了 blazor 应用程序。 主要布局看起来像
@inherits LayoutComponentBase
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4 auth">
<LoginDisplay />
<a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<div class="content px-4">
@Body
</div>
</div>
我正在尝试在将折叠的顶行内添加汉堡包按钮 - 显示 NavMenu。
最佳答案
我在 .NetCore 3.1 中使用了与您 blazor 相同的模板,这让我发疯了。在 CSS 文件中找到此代码并进行您在此处看到的更改:
@media (min-width: 768px) {
app {
flex-direction: row;
}
.sidebar {
width: 100%;
position: fixed;
top: 0;
}
.main .top-row {
position: sticky;
top: 0;
}
.main > div {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
.navbar-toggler {
/*display: none;*/
}
.sidebar .collapse {
/*Never collapse the sidebar for wide screens*/
/*display: block;*/
} }
这将添加切换器并最小化导航栏。 我还希望它跨越整个顶部,所以我在上面的代码中设置了宽度:
.sidebar{ width:100% }
但你可以随心所欲。
希望这会有所帮助。
关于bootstrap-4 - 最小化侧边栏中的默认 Blazor NavMenu,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59048009/