twitter-bootstrap - Bootstrap 4 Collapsed Navbar - 无法对齐不可折叠的项目

Question

我正在开发一个可折叠的导航栏/切换，但是当导航栏被切换时，我无法让“不可折叠”项目内联显示。

这是模板代码：

<nav class="navbar navbar-expand-sm bg-light navbar-light sticky-top">

    <!-- Logo -->
    <a class="navbar-brand" href="#"><span class="fa fa-home">Logo</span></a>

    <!-- Navbar toggler icon -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapseMe">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!--  Collapsible items -->     
    <div class="collapse navbar-collapse collapseMe">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
        </ul>
    </div>

    <!--  Non-collapsible items -->
    <div>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Test
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'logout' %}">Logout</a>
            </li>
        </ul>
    </div>
</nav>

当前：非折叠视图

当前：折叠视图 -- 不可折叠项目（测试和注销）不是内联的

当前：折叠菜单切换正确显示

这就是我要的

标签： twitter-bootstrapnavbarinline