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

Question

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

只要关闭菜单，元素的顺序就符合预期:公司、浏览、登录

问题:一旦我打开菜单，#menu 就会按预期获得 navbar-collapse 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。我能想到的唯一方法是通过 Bootstrap 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>