Bootstrap 4折叠的Navbar-无法对齐不可折叠的物品

时间:2018-07-27 18:02:04

标签: twitter-bootstrap navbar inline

我正在处理可折叠的导航栏/切换,但是当导航栏切换时,我无法使“非可折叠”项内嵌显示。

这是模板代码:

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

当前:非折叠视图

enter image description here

当前:已折叠视图-不可折叠的项目(“测试和注销”)不是内联

enter image description here

当前:折叠的菜单切换显示正确
enter image description here

这就是我想要的

enter image description here

0 个答案:

没有答案