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

Question

我即将结束 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>

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

bootstrap 团队将框架从 alpha 版本更改为 beta 版本。因此，您想在框架的 "alpha" 版本中使用 inverse，但在框架的 beta 版本中使用 "dark"。

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

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

Boostrap 4 navbar element shows up without hamburger menu button

bootstrap-4

twitter-bootstrap-4