Question

我刚接触使用bootstrap 4.我有简单的菜单，两个项目，它们正在紧挨着彼此显示。

    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    @Html.ActionLink("Web", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                @Html.ActionLink("Home", "Index", "Home", null, new { @class = "navbar-link" })
                <span class="sr-only">(current)</span>
            </li>
            <li class="nav-item">
                @Html.ActionLink("Holly", "CreateSpreadsheet", "Oper", null, new { @class = "navbar-link" })
            </li>
        </ul>
        <span class="navbar-text ml-auto">
            Hello, @User.Identity.Name.Split('\\')[1]!
        </span>
    </div>
</nav>

它显示了这个： 1

知道为什么会这样吗？

Answer 1

链接的类名称应为nav-link，而不是navbar-link。

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <a href="" class="navbar-brand">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a href="" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
               <a href="" class="nav-link">Holly</a>
            </li>
        </ul>
        <span class="navbar-text ml-auto">
            Hello
        </span>
    </div>
</nav>

https://www.codeply.com/go/pFjAim87gL

Bootstrap 4导航栏导航项目彼此相邻

1 个答案: