我们正在创建POS餐厅系统，我们希望调整设计，以便我们可以同时测试系统的外观。
我们正在使用Asp.net核心，并且已经尝试从github尝试使用此存储库来尝试某些功能。
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top box-shadow mb-3">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" asp-area="" asp-controller="Home"
asp-action="Index">POS Title</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target=".navbar-collapse" aria-
controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<partial name="_LoginPartial" />
</nav>
<div id="wrapper" class="toggled"></div>
<div id="sidebar-wrapper"></div>
<ul class="sidebar-nav"style="margin-top:15px;">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="Customer" asp-action="Index">Guest</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="Vendor" asp-action="Index">Supplier</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="Product" asp-action="Index">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="PurchaseOrder" asp-action="Index">Purchases</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="GoodsReceive" asp-action="Index">Goods Received</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="SalesOrder" asp-action="Index">Sales Order</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="SalesOrder" asp-action="POS">Point Of Sales</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="InvenTran" asp-action="Index">Inventory</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="page-content-wrapper">
<div class="container-fluid">
<partial name="_CookieConsentPartial" />
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - POS Title - <a asp-area="" asp-controller="Home"
asp-action="Privacy">Privacy Policy</a>
</div>
</footer>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.1.3/js/bootstrap.bundle.min.js"
asp-fallback-
src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn &&
window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha256-
E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
</script>
</environment>
<!--datatables.net-->
<script src="~/lib/DataTables/datatables.min.js"></script>
<!--datatables.net-->
<!--axios-->
<script src="~/lib/axios/axios.min.js"></script>
<!--axios-->
<!--jquery numpad-->
<script src="~/lib/jquery-numpad/jquery.numpad.js"></script>
<!--jquery numpad-->
<!--toastr-->
<script src="~/lib/toastr/toastr.min.js"></script>
<!--toastr-->
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
因此，应该类似于，客户，供应商，产品，采购订单，已收货物等的导航应该在左侧，并且当您单击每个导航时，内容将显示在中心，菜单中在导航到其他菜单时也应保持可见。请帮忙。
答案 0 :(得分：0)
主要是通过更改CSS样式来实现的
添加一个简单的css库PS Y:\> '[10:26:33]: Connector: 8965 Info1: 8 Info2: 8 Info3: 4 E_DE_HH: 6000 Info4: 99' -match 'Connector: (\d*).*E_DE_HH: (\d*)'
True
PS Y:\> "$($matches[1]) $($matches[2])"
8965 6000
，该库包含一种样式，用于显示路径simple-sidebar的左侧
wwwroot/lib/simple-sidebar/css/simple-sidebar.css现在您可以在布局中添加链接：
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 0;
width: 250px;
height: 100%;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
margin-left: 250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
侧边栏的示例代码
<link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css" />