Bootstrap отзывчивый navbar (левая и правая сторона с формой) .NET Core

Question

У меня есть проблема с загрузочной навигационной панелью, из-за которой у меня довольно много ссылок, и поэтому она не разворачивается достаточно рано, в результате чего получается двухрядная навигационная панель. У меня есть ссылки на левой и правой стороне. Как мне обеспечить, чтобы он рухнул достаточно рано? Спасибо!

Редактировать: даже на загрузочных документах это происходит, поэтому я совсем запутался

Это мои текущие коды:

<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 в качестве примера, поэтому мне может не понадобиться полный тег navbar. Это вызывает некоторые проблемы. Либо я получаю его влево и вправо, но он не закрывается с нужным размером (что приводит к расширению панели навигации), или все это слева, но панель навигации закрывается вовремя.

@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>