ASP.NET MVC C# 如何分隔导航栏链接？
Posted
技术标签:
【中文标题】ASP.NET MVC C# 如何分隔导航栏链接？【英文标题】：ASP.NET MVC C# How To Separate Navigation Bar Links? 【发布时间】：2021-11-03 11:55:33 【问题描述】：我有一个带有 MVC 的 C# ASP.NET Core 项目。目前我已经添加了 4 个用户可以上传文件的类别，它们的类别显示在导航栏中。问题是，所有导航栏项目（链接）之间甚至没有间距。任何人都可以帮助我提供一个示例代码，请教如何在它们之间设置一个严肃的空间甚至垂直线？我是新手，不太擅长cs.html。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Choose between the skill categories:</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">@Html.ActionLink("Beginner", "Index", "Home", new id = "incepator" )</li>
<li class="nav-item active">@Html.ActionLink("Intermediate", "Index", "Home", new id = "intermediar" )</li>
<li class="nav-item active">@Html.ActionLink("Advanced", "Index", "Home", new id = "admin" )</li>
<li class="nav-item active">@Html.ActionLink("Master", "Index", "Home", new id = "master" )</li>
<li class="nav-item active">@Html.ActionLink("Show All", "Index", "Home", new id = "" )</li>
</ul>
【问题讨论】：
您能否提供导航栏的屏幕截图以帮助可视化问题？ 【参考方案1】：可能的方法是将 CSS（示例如下）和参数 ", new @class= "navbar-li" " 添加到您的 @Html.ActionLink 函数中。参数将类“navbar-li”添加到 li 标签。 CSS 样式的内容。
修改样本：
<head>
<style type="text/css">
.navbar-li
font-family:'Open Sans'
font-size: 15px;
padding: 15px 15px;
ul.navbar-nav
list-style-type: none;
ul.navbar-nav li
border-right: 1px solid #000;
ul.navbar-nav li:last-of-type
border-right: none;
</style>
</head>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">@Html.ActionLink("Beginner", "Index", "Home", new id = "incepator" , new @class = "navbar-li" )</li>
<li class="nav-item active">@Html.ActionLink("Intermediate", "Index", "Home", new id = "intermediar" , new @class = "navbar-li" )</li>
<li class="nav-item active">@Html.ActionLink("Advanced", "Index", "Home", new id = "admin" , new @class = "navbar-li" )</li>
<li class="nav-item active">@Html.ActionLink("Master", "Index", "Home", new id = "master" , new @class = "navbar-li" )</li>
<li class="nav-item active">@Html.ActionLink("Show All", "Index", "Home", new id = "" , new @class = "navbar-li" )</li>
</ul>
</div>
【讨论】：
非常感谢【参考方案2】：如果说严重的空间，你的意思是网页上的视觉效果，你可以通过 CSS 来做到这一点。或者，如果您希望它们垂直间隔，则使用 html 标记，但我建议不要使用后者。
【讨论】：
请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。以上是关于ASP.NET MVC C# 如何分隔导航栏链接？的主要内容，如果未能解决你的问题，请参考以下文章
在 ASP.NET Core Razor 页面中使用 JavaScript 更改活动导航栏链接