Boostrap 4导航栏元素显示没有汉堡包菜单按钮

时间:2017-11-07 13:13:30

标签: bootstrap-4 twitter-bootstrap-4

我正在关闭Bootstrap 4 Beta的教程。 li链接在展开的视图中显示正常,但是,当我崩溃超过断点时,它们会消失,并且不会出现汉堡包菜单。

知道为什么会这样吗?我怀疑它与崩溃插件有关,但我不确定。

我正在运行React,但是当它编译为html时,这是我的代码:

<div class="header">
    <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">
                <img alt="Trellis" src="../../images/trellis.png">
            </a>
        </div>
        <button class="navbar-toggler" 
            type="button" 
            data-toggle="collapse" 
            data-target="#navbarSupportedContent" 
            aria-controls="navbarSupportedContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" 
            id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/signout">Sign Out</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/invite">Invite Friends</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="/dashboard">My Plots</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="/addPlot">Add Plots</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

1 个答案:

答案 0 :(得分:1)

如果您使用的是Bootstrap 4 Beta,则需要将“navbar-inverse”和“bg-inverse”类分别更改为“navbar-dark”和“bg-dark”。

<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

引导团队从框架的alpha版本到beta版本改变了这一点。因此,您希望在框架的“alpha”版本中使用inverse,但在框架的beta版本中使用“dark”。

示例代码集https://codepen.io/Washable/pen/mqrXoa