Bootstrap 4：无论屏幕大小，始终显示移动菜单按钮

Question

How can I get always display the mobile menu button no matter screen size? I do not want the links to appear until a person clicks the mobile button. Thank you!

I realize there is a post here on Bootstrap 3, however it does not work with Bootstrap 4. Will you please advise?

Answer 1

更新引导程序 4.1.x

排除navbar-expand*班级。

在测试版中，navbar-toggleable-*该类被替换为navbar-expand-*，但现在一切都向上移动了一层。由于导航栏的默认状态始终为折叠/移动 (xs)，因此您只需排除navbar-expand-*该类，以便菜单始终在所有层上折叠。

测试版演示：https : //www.codeply.com/go/HiMQd9taEd
Bootstrap 4.1.3：https : //www.codeply.com/go/ugmj6XKY79

原始答案（Bootstrap 4 alpha）

在 Bootstrap 4 中，导航栏与 3.x 非常不同，它总是折叠起来，除非被导航栏-toggleable-* 类之一覆盖。您只需要确保您的导航栏不包含navbar-toggleable-*.

<nav class="navbar navbar-fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Wow</a>
            </li>
        </ul>
    </div>
</nav>

Alpha 演示：http : //www.codeply.com/go/LN6szcJO53