是否有一种 HTML/Bootstrap 方法可以根据响应菜单的切换状态在导航栏中设置元素顺序?

Question

我正在尝试在 Angular 4 中应用响应式 Bootstrap 8 导航栏。

只要菜单关闭，元素的顺序就按预期： 公司， 浏览， 登录

问题： 一旦我打开菜单，#menu 就会获得导航栏折叠 flex 属性，正如预期的那样：

.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}

但是，由于flex-basis: 100%，这会 #company 向右推，#login 最终会位于整个菜单下方。

<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" id="company">COMPANY</a>
<div class="collapse navbar-collapse" id="menu">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">BROWSE</a>
</div>
</div>
<div class="navbar-nav" id="login">
<a class="nav-item nav-link" href="#">LOGIN</a>
</div>
</nav>

我很难确保 #menu 不会影响 #company 和 #login。我能想到的唯一方法是通过类order-*引导来设置元素的顺序。 这需要我知道 #menu 何时打开，如果没有一些编程的jQuery观察(我想避免(，这似乎是不可能的。

如何根据 #menu 的切换状态设置顺序？ 或者：如何确保元素保留在原处？

Answer 1

在我的情况下

<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="about-us.html">
<img class="img-responsive" src="../img/logo.png" alt=""/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="la la-bars"></i></span>
</button>
<div class="navbar-collapse collapse" id="menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-item nav-link" href="#">BROWSE</a>
</li>
</ul>
</div>
<a class="nav-item nav-link" href="#">LOGIN</a>
</nav>