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

Posted 2023-03-06

【中文标题】Bootstrap 4：无论屏幕大小，始终显示移动菜单按钮

【英文标题】：Bootstrap 4: Always display the mobile menu button no matter screen size

【发布时间】：2017-06-26 15:42:18

【问题描述】：

无论屏幕大小如何，如何始终显示移动菜单按钮？我不希望在有人单击移动按钮之前出现链接。谢谢！

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

【问题讨论】：

标记为重复的答案适用于 Bootstrap 3，最近的答案是一年多以前。如果您在 Bootstrap 4 中，请从

谢谢。这是一个有用的答案，希望旗帜被丢弃，我可以投票。

【参考方案1】：

更新 Bootstrap 4.1.x

排除navbar-expand* 类。

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

测试版演示：https://www.codeply.com/go/HiMQd9taEd 引导程序 4.1.3：https://www.codeply.com/go/ugmj6XKY79

---

原始答案（Bootstrap 4 alpha）

在 Bootstrap 4 中，导航栏与 3.x 非常不同，并且它总是折叠，除非被 navbar-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

【讨论】：

请注意，如果您从 Bootstrap 示例中复制，您还需要删除 navbar-collapse div 上的 d-sm-inline-flex