Question

我知道他们从alpha 5改变了导航栏但是我无法找到破坏我之前工作的导航栏的内容。如果我将页面调整为XS，则会出现汉堡包，链接就在那里，但我得到的是＆gt; XS是一条没有任何内容的蓝线。

导航被声明为：

<nav class="navbar navbar-inverse bg-primary">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
        <a class="navbar-brand" href="/home">My Project</a>
        <ul class="nav navbar-nav">
            @if (Auth::check())
            <li class="nav-item"><a class="nav-link" href="/auth/logout">Logout</a></li>
            @else
            <li class="nav-item"><a class="nav-link" href="/auth/login">Login</a></li>
            @endif
            ///
        </ul>
    </div>
</nav>

任何线索？

Answer 1

这里是alpha 6的更新导航栏...

https://www.codeply.com/go/wMQvyBdLTi

navbar-toggleable-xs已更改为navbar-toggleable，需要进入navbar元素。切换器将根据navbar-toggleable断点隐藏，以便您可以删除hidden-sm-up。最后，将课程navbar-collapse添加到collapse。

<nav class="navbar navbar-inverse navbar-toggleable bg-primary">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
    </button>
    <div class="collapse navbar-collapse" id="exCollapsingNavbar">
        <a class="navbar-brand" href="/home">My Project</a>
        <ul class="nav navbar-nav">
            @if (Auth::check())
            <li class="nav-item"><a class="nav-link" href="/auth/logout">Logout</a></li>
            @else
            <li class="nav-item"><a class="nav-link" href="/auth/login">Login</a></li>
            @endif
            ///
        </ul>
    </div>
</nav>

对于Bootstrap 4 Beta，navbar-toggleable-*已更改为navbar-expand-*，navbar-inverse现已navbar-dark

导航栏4 alpha 6安装后导航栏未显示任何链接

1 个答案: