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

时间:2015-10-24 17:23:12

标签: navbar twitter-bootstrap-4 bootstrap-4

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

有一个正常工作的引导3 example,但我找不到4个。

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

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

  

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

我拥有最少的自举知识,所以任何解决方案我都不想与框架作斗争,如果已经有一个受制裁的方式来做这件事。

修改

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

1 个答案:

答案 0 :(得分: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文档中Collapsible content下方的Responsive Navbar示例正是我使用navbar-toggleable-xs类完成的工作。我之前没有看到它,因为我没有让窗户变窄。

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

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