6

我试图找到一个 bootstrap 4 响应式导航栏的示例，该导航栏仅在 xs 宽度处折叠为汉堡包按钮，但在更宽时完全可见。

有一个 Just Works 的 bootstrap 3示例，但我发现 4 没有。

bootstrap 4 导航栏示例页面显示了一个折叠的内容版本，但它在所有宽度上都是折叠的。

在它下面提示了如何使用 .navbar-toggler 等使其工作。人。

对于更复杂的导航栏模式，如 Bootstrap v3 中使用的模式，将 .navbar-toggleable-* 类与 .navbar-toggler 结合使用。这些类覆盖我们的响应式实用程序，仅在要显示内容时才显示导航。

我的引导知识很少，所以如果已经有一种认可的方法可以做到这一点，我不想与框架抗争任何解决方案。

编辑：

实际上，bootstrap 4 文档中Collapsible 内容下方的响应式导航栏示例正是我使用navbar-toggleable-xs类所寻找的。之前没看到是因为窗户不够窄。

4

1 回答 1

12

Bootstrap 4 稳定版：

在稳定版本navbar-toggleable-*中已重命名为navbar-expand-*，但中-xs缀（仍然）被删除，所以在你的情况下你应该使用navbar-expand.

文档中的解释：https ://getbootstrap.com/docs/4.1/components/navbar/#how-it-works

仅适用于 Bootstrap 4 alpha：

实际上，Bootstrap 4 文档中Collapsible 内容下方的响应式导航栏示例正是我在使用navbar-toggleable-xs该类时所寻找的。之前没看到是因为窗户不够窄。

在 Bootstrap 4 alpha 6 中，它现在只是navbar-toggleable没有-xs.

编辑：文档链接现在在这里：http: //v4-alpha.getbootstrap.com/components/navbar/#nav

于 2015-11-17T23:25:59.783 回答