如何在MVC 5中实现Bootstrap边栏
Pow*_*ow5 5 html css asp.net asp.net-mvc twitter-bootstrap
我想在中实现导航侧边栏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，这将在页面的左侧造成难看的空白，因为每个菜单都以inView呈现@RenderBody()。 - 如果将侧面菜单放在中
_Layout.cshtml，如何jQuery在单击按钮时包含用于切换和隐藏侧面菜单的代码？
有没有更好的实现方法？