ASP.NET Core MVC C# 如何为导航栏链接添加间距或分隔竖线

解决方案 #

你当前使用的是Bootstrap内置的导航栏组件，以下是两种可直接复用的实现方案：

方案1：仅添加导航项间距（无需额外写CSS，用Bootstrap自带工具类） #

直接给每个.nav-item添加Bootstrap内置的右外边距类即可，数值1~5可调，数值越大间距越大：

<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 me-4">@Html.ActionLink("Beginner", "Index", "Home", new { id = "incepator" })</li>
            <li class="nav-item active me-4">@Html.ActionLink("Intermediate", "Index", "Home", new { id = "intermediar" })</li>
            <li class="nav-item active me-4">@Html.ActionLink("Advanced", "Index", "Home", new { id = "admin" })</li>
            <li class="nav-item active me-4">@Html.ActionLink("Master", "Index", "Home", new { id = "master" })</li>
            <li class="nav-item active">@Html.ActionLink("Show All", "Index", "Home", new { id = "" })</li>
        </ul>
    </div>
</nav>

如果上述间距不生效，说明你用的是Bootstrap4版本，把me-4替换成mr-4即可。

方案2：添加间距+竖线分隔 #

首先在你项目的全局CSS文件（一般是wwwroot/css/site.css）里添加如下自定义样式：

/* 导航项竖线分隔样式 */
.navbar-nav .nav-item:not(:last-child) {
    border-right: 1px solid #ccc; /* 竖线颜色可自行调整 */
    padding-right: 1rem; /* 文字到竖线的右侧间距 */
    margin-right: 1rem; /* 竖线到下一个导航项的左侧间距 */
}

添加后导航栏的HTML代码不需要额外修改类，直接用你原来的代码即可，刷新页面就能看到带竖线分隔的效果。

内容的提问来源于stack exchange，提问作者Panait Rares Horia