twitter-bootstrap Bootstrap 4:无论屏幕大小,始终显示移动菜单按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/42123006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:35:37  来源:igfitidea点击:

Bootstrap 4: Always display the mobile menu button no matter screen size

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

提问by Bill Johnson

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?

我知道这里有一篇关于 Bootstrap 3 的帖子,但是它不适用于 Bootstrap 4。请您指教一下?

回答by Zim

Update Bootstrap 4.1.x

更新引导程序 4.1.x

Exclude the navbar-expand*class.

排除navbar-expand*班级。

As of beta, the navbar-toggleable-*class was replaced with navbar-expand-*, but now everythings moves up a tier. Since the default state of the navbar is always collapsed/mobile (xs) you'd simply exclude the navbar-expand-*class so that the menu is always collapsed on all tiers.

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

Beta demo: https://www.codeply.com/go/HiMQd9taEd
Bootstrap 4.1.3: https://www.codeply.com/go/ugmj6XKY79

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



Original Answer (Bootstrap 4 alpha)

原始答案(Bootstrap 4 alpha)

In Bootstrap 4 the navbar is very different than 3.x, and it is always collapsedunless overriden by one of the navbar-toggleable-* classes. You just need to make sure your navbar doesn't include navbar-toggleable-*.

在 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 demo: http://www.codeply.com/go/LN6szcJO53

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