ASP.NET 核心 5.0 Bootstrap 5.0 - 边栏

Question

在过去的 6 个小时里，我一直在尝试使用 Bootstrap 5.0 创建静态不可折叠的侧边栏，但遗憾的是没有成功。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ASP.NET</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-grid.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-reboot.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>

    <div class="row">
        <div class="col-lg-3">
            <div class="sticky-top">
              <!--here will be sidebar-->
            </div>
        </div>
        <div class="col-lg-6">
            <div class="container">
                <main role="main" class="pb-3">
                    @RenderBody()
                </main>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="sticky-top">
                ...
            </div>
        </div>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; @DateTime.Now.Year - ASP.NET - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

我已经在我想放的地方发表评论了。

我完全知道网上有很多教程和示例，但他们没有使用原始 Bootstrap 5.0，因为即使我复制它 1:1，它 returns 大量关于丢失类的警告，因此侧边栏看起来像是由最近几个小时学习 HTML 的人制作的。

完全支持水平导航栏，但创建有效的垂直侧边栏似乎是不可能的。

Answer 1

Blazor 服务器模板在侧边导航栏上做得不错。它与 asp.net 不同，但模板中的 css 可能会给您一些尝试的新想法。

ASP.NET 核心 5.0 Bootstrap 5.0 - 边栏

ASP.NET Core 5.0 Bootstrap 5.0 - sidebar

c#

asp.net

bootstrapping