navbar - 以 xs 宽度折叠的 Bootstrap 4 响应式导航栏？

Question

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

有一个 bootstrap 3 example Just Works，但对于我发现的 4 没有任何效果。

bootstrap 4 导航栏示例页面显示 collapsed content版本，但它在所有宽度上都折叠了。

下面它暗示了如何使用 .navbar-toggler 等使其工作。阿尔。

For more complex navbar patterns, like those used in Bootstrap v3, use the .navbar-toggleable-* classes in conjunction with the .navbar-toggler. These classes override our responsive utilities to show navigation only when content is meant to be shown.

我只有最少的 bootstrap 知识，所以如果已经有一种经过批准的方法可以做到这一点，我不想与框架作斗争。

编辑:

实际上， Collapsible content 下面的响应式导航栏示例在 bootstrap 4 文档中使用 navbar-toggleable-xs 类完全满足我的要求。我之前没有看到它，因为我没有把 window 做得足够窄。

Answer 1

Bootstrap 4 稳定版:

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

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

仅适用于 Bootstrap 4 alpha:

实际上，Collapsible content 下面的响应式导航栏示例在 Bootstrap 4 文档中使用 navbar-toggleable-xs 完全满足我的要求类(class)。我之前没有看到它，因为我没有把 window 做得足够窄。

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

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