Bootstrap 响应式导航栏（左侧和右侧带表单）.NET Core

Question

我的引导导航栏有这个问题，我有很多链接，因此它没有足够早地崩溃，从而导致 2 行导航栏。我在左侧和右侧都有链接。我该如何确保它足够早地崩溃？谢谢！

编辑：即使在引导文档上也会发生这种情况，所以我很困惑

这是我当前的代码：

<ul class="nav navbar-nav mr-auto">
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>

        <form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })" method="post" id="logoutForm" class="navbar-right">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage" class="nav-link">Profile</a>
                </li>
                <li class="nav-item">
                    <button type="submit" class="btn btn-link navbar-btn navbar-link">Logout</button>
                </li>
            </ul>
        </form>
 </ul>

更新 2： 我怀疑这可能是由于 .NET Core 处理数据的方式。它是一个共享导航栏，基于 .NET Core 自动生成的内容，这就是我所拥有的。正如您在 else 中看到的示例，所以我可能不需要完整的导航栏标签。这导致了一些问题。要么我左右得到它，但它没有以正确的大小关闭（导致扩展的导航栏），或者它都在左边，但导航栏按时关闭。

@if (SignInManager.IsSignedIn(User) && showAll == true)
{
//View codes here
}
else
{
    <ul class="nav navbar-nav mr-auto">
        <li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Index" class="nav-link">Home</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Contact" class="nav-link">Contact</a></li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
        <li class="nav-item"><a asp-area="Identity" asp-page="/Account/Login" class="nav-link">Login</a></li>
    </ul>
}

更新： 对于 .NET Core MVC 用户，只需转到 Views/Shared/Layout.cshtml 并编辑 <nav>

Answer 1

我猜你没有向我们展示完整的代码，

在

中把lg改成xl

<nav class="navbar navbar-expand-lg navbar-light bg-light">

变成

<nav class="navbar navbar-expand-xl navbar-light bg-light">

所以导航栏将扩展为 1200px (xl) 而不是 992 (lg)

<nav class="navbar navbar-expand-xl navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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="nav navbar-nav mr-auto">
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
        <li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>

        <form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })" method="post" id="logoutForm" class="navbar-right">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage" class="nav-link">Profile</a>
                </li>
                <li class="nav-item">
                    <button type="submit" class="btn btn-link navbar-btn navbar-link">Logout</button>
                </li>
            </ul>
        </form>
 </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>