我想在 MVC 5 中实现导航侧边栏，但我在 Bootstrap 3 中找不到任何内置类元素附带的。我试过以下代码:
_Layout.cshtml
<body>
//the sidebar code is here...
<div id="Wrapper">
<ul>
<li>hello</li>
<li>Project</li>
<li>Account settings</li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content" id="page-content-wrapper">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year/p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/Custom.css" rel="stylesheet" />
@RenderSection("scripts", required: false)
CSS
#Wrapper {
background-color: #3F51B5;
z-index:1;
height: 100%;
width:300px;
position:fixed;
}
#page-content-wrapper{
margin-left:300px;
}
到目前为止，我所做的是将 margin-left: 300px到页面内容并添加 <div id="Wrapper">封装侧面导航栏并为其设置样式。我得到的结果如下:
但是，我发现这个实现存在这些问题:
- 如果我将侧边菜单放在
_Layout.cshtml中意味着每个页面都会有那个侧边菜单。但我希望侧边菜单仅在用户登录时出现。 - 如果我把侧边菜单放在每个人中
View, 这将导致页面左侧出现丑陋的空白区域，因为每个View在@RenderBody()中呈现. - 如果我将侧边菜单放在
_Layout.cshtml中, 我如何包括jQuery单击按钮时切换和隐藏侧边菜单的代码？
有没有更好的实现方式？
最佳答案
为了简化解决方案，我将创建两个布局:
_Layout.cshtml
_LayoutNoSidebar.cshtml
要打开侧边栏，请将此模板包含在您的 _Layout.cshtml 中:
https://blackrockdigital.github.io/startbootstrap-simple-sidebar/
关于html - 如何在 MVC 5 中实现 Bootstrap Sidebar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42457177/