Bootstrap 4 个以 xs 宽度折叠的响应式导航栏?

Bootstrap 4 responsive navbar that collapses at xs width?

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

有一个 bootstrap 3 example 可以正常工作,但我找不到 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 知识很少,所以如果已经有批准的方法来执行此操作,我不想与框架对抗任何解决方案。

编辑:

实际上,bootstrap 4 文档中 Collapsible content 下面的响应式导航栏示例使用 navbar-toggleable-xs 完全符合我的要求class。我没有早点看到它,因为我没有把 window 设置得足够窄。

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 content 下面的响应式导航栏示例完全符合我使用 navbar-toggleable-xs class 寻找的内容。我没有早点看到它,因为我没有把 window 设置得足够窄。

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

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