C# MVC Net Core侧栏导航菜单放置在_Layout.cshtml中
我创建了一个简单的MVC Net Core默认项目。我做了一些调整，使它看起来像图片。现在_Layout.cshtml只有顶部导航栏 我想在这里添加左侧导航栏，阅读资源。 . 我应该把它放在下面的cshtml文件中的什么位置？我试着在下面的区域周围放置，但并没有正常工作C# MVC Net Core侧栏导航菜单放置在_Layout.cshtml中,c#,css,asp.net-mvc,twitter-bootstrap,asp.net-core,C#,Css,Asp.net Mvc,Twitter Bootstrap,Asp.net Core,我创建了一个简单的MVC Net Core默认项目。我做了一些调整，使它看起来像图片。现在_Layout.cshtml只有顶部导航栏 我想在这里添加左侧导航栏，阅读资源。 . 我应该把它放在下面的cshtml文件中的什么位置？我试着在下面的区域周围放置，但并没有正常工作 <div class="container body-content"> @RenderBody() area, @RenderBody（）区域， 在下面的cshtml中，我将把导航条形码片段放在哪里？每
<div class="container body-content">
@RenderBody() area,
@RenderBody（）区域，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - ElectronicsStore</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!--Navbar Header Start Here-->
<div class="navbar-header">
<a class="navbar-brand" href="#"><font color="#fff"><b>Electronics</b></font></a>
</div>
<!--Navbar Header End Here-->
<!--Menu Start Here-->
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
<!--dropdown Menu Start-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Technology
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">.NET</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">ASP.NET MVC</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
<!--dropdown Menu End-->
<li><a href="#">Contact Us</a></li>
</ul>
<!--Menu End Here-->
<!--Right Aligned Menu Start-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><font color="#fff">Login</font></a></li>
<li><a href="#"><font color="#fff">Cart</font></a></li>
</ul>
<!--Right Aligned Menu End-->
</div>
</nav>
<div class="container body-content">
// TRIED PLACING IT AROUND HERE, DOES NOT WORK
@RenderBody()
<hr />
<footer>
<p>© 2018 - ElectronicsStore</p>
</footer>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)
</body>
</html>
@ViewData[“标题”]-电子存储
-
//试着把它放在这附近，不起作用
@RenderBody（）
&抄袭；2018年-电子商店
@RenderSection（“脚本”，必需：false）
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul id="sidebar_menu" class="sidebar-nav" style="text-align: right; padding-right: 10px;
padding-top: 10px">
<li class="sidebar-brand"><a id="menu-toggle" href="#"><span id="main_icon" class="navbar-icon fa fa-bars icon">
</span></a></li>
</ul>
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#">Start Bootstrap </a></li>
<li><a href="#">Home</a> </li>
<li><a href="#">About</a> </li>
<li><a href="#">Contact</a> </li>
</ul>
</div>
<!-- /#sidebar-wrapper -- >
这是侧菜单的引导4代码。只需使用给定代码编辑layout.cshtml
$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
});
正文{
溢出x：隐藏；
}
#包装纸{
左侧填充：0；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#包装器。切换{
左侧填充：250px；
}
#边栏包装{
z指数：1000；
位置：固定；
左：250px；
宽度：0；
身高：100%；
左边距：-250px；
溢出y：自动；
背景：#000；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#wrapper.toggled#侧栏包装器{
宽度：250px；
}
#页面内容包装器{
宽度：100%；
位置：绝对位置；
填充：15px；
}
#wrapper.toggled#页面内容包装器{
位置：绝对位置；
右边距：-250px；
}
/*边栏样式*/
.侧边栏导航{
位置：绝对位置；
排名：0；
宽度：250px；
保证金：0；
填充：0；
列表样式：无；
}
.侧边栏导航李{
文本缩进：20px；
线高：40px；
}
.侧边栏导航李a{
显示：块；
文字装饰：无；
颜色：#999999；
}
.侧边栏导航李a：悬停{
文字装饰：无；
颜色：#fff；
背景：rgba（255，255，255，0.2）；
}
.侧栏导航李a:激活，.侧栏导航李a:焦点{
文字装饰：无；
}
.sidebar nav>.sidebar品牌{
高度：65px；
字号：18px；
线高：60px；
}
.sidebar nav>.sidebar品牌a{
颜色：#999999；
}
.sidebar nav>.sidebar品牌a:悬停{
颜色：#fff；
背景：无；
}
@介质（最小宽度：768px）{
#包装纸{
左侧填充：0；
}
#包装器。切换{
左侧填充：250px；
}
#边栏包装{
宽度：0；
}
#wrapper.toggled#侧栏包装器{
宽度：250px；
}
#页面内容包装器{
填充：20px；
位置：相对位置；
}
#wrapper.toggled#页面内容包装器{
位置：相对位置；
右边距：0；
}
}
你好，世界！
-
-
-
-
搜寻
-
-
-
-
-
-
-
-