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

our*_*ave 5 navbar twitter-bootstrap-4 bootstrap-4

我正在尝试找到一个自举4响应导航栏的示例,该导航栏仅在xs宽度处折叠为汉堡按钮,但在更宽时完全可见.

有一个正常工作的bootstrap 3 示例,但我找到的4个没有.

bootstrap 4 navbar示例页面显示折叠的内容版本,但它在所有宽度处折叠.

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

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

我有最小的自举知识,所以任何解决方案我都不想与框架作斗争,如果已经有一个受制裁的方法来做到这一点.

编辑:

实际上,bootstrap 4文档中的Collapsible内容下面的Responsive Navbar示例正是我使用navbar-toggleable-xs类完成的工作.我之前没有看到它,因为我没有让窗户变窄.

our*_*ave 10

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文档中的可折叠内容下面的Responsive Navbar示例正是我正在寻找的使用navbar-toggleable-xs该类的内容.我之前没有看到它,因为我没有让窗户变窄.

在Bootstrap 4 alpha 6中,它现在简直navbar-toggleable没有了-xs.

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

  • 因为-xs在网格系统中根本不存在! (2认同)