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里面看到的例子一样，所以我可能不需要完整的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中的lg更改为

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

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

1 个答案: