在引导程序中更改_LoginPartial的媒体断点

Question

我已经使用Bootstrap 4在.Net Core应用程序中搭建了一个导航栏。 它看起来像这样：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-lg navbar-toggleable-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Home/Home">MyApp</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light"  asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 6</a>
</li>
</ul>
<partial name="_Menu" />
</div>
</div>
</nav>
</header>

由于菜单中有许多项目，我将导航栏切换-sm 更改为导航栏切换-lg，以便汉堡菜单显示在更宽的媒体断点处，并且"登录"不会位于菜单顶部的宽度小于 lg。 虽然这适用于显示汉堡菜单，但"登录"菜单项会继续显示，因为媒体宽度正在缩小，直到达到小尺寸。

如何确保_Login在小于 lg 的媒体宽度下消失在汉堡菜单下？

Answer 1

目前在引导程序 4.3.1中没有名为navbar-toggleable-lg的类名。它已被替换为navbar-expand-lg.所以删除navbar-toggleable-lg.

现在，如果您使用navbar-expand-lg那么还必须使用d-lg-inline-flex flex-lg-row-reverse而不是d-sm-inline-flex flex-sm-row-reverse。

因此，您的完整导航栏代码应如下所示：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Home/Home">MyApp</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-lg-inline-flex flex-lg-row-reverse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light"  asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 6</a>
</li>
</ul>
<partial name="_Menu" />
</div>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>