Bootstrap 4响应式导航栏在xs宽度处折叠? [英] Bootstrap 4 responsive navbar that collapses at xs width?

问题描述

我正在尝试查找bootstrap 4响应式导航栏的示例，该导航栏仅在xs宽度处折叠为汉堡包按钮，而在宽度较宽时才完全可见.

I'm trying to find an example of the bootstrap 4 responsive navbar that collapses to a hamburger button only at the xs width but is fully visible when wider.

有一个Bootstrap 3 示例可以正常工作，但我发现的4没有任何帮助.

There's a bootstrap 3 example that Just Works, but nothing for 4 that I've found.

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

The bootstrap 4 navbar examples page shows a collapsed content version but it's collapsed at all widths.

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

And below it hints at how to make it work using .navbar-toggler, et. al.

对于更复杂的导航栏模式(如在Bootstrap v3中使用的模式)，请将.navbar-toggleable- *类与.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.

我对引导程序的知识很少，因此，如果已经有认可的方法可以执行任何不希望与该框架发生冲突的解决方案.

I have minimal bootstrap knowledge so any solution I don't want to fight the framework if there's already a sanctioned way to do this.

实际上，下面的可折叠内容下的响应式导航栏"示例bootstrap 4文档完全可以满足我使用 navbar-toggleable-xs 类的要求.我之前没有看到它，因为我没有将窗口缩小得足够窄.

Actually, the Responsive Navbar example below the Collapsible content in bootstrap 4 documentation does exactly what I was looking for using the navbar-toggleable-xs class. I didn't see it earlier because I didn't make the window narrow enough.

推荐答案

Bootstrap 4稳定版:

在稳定版本中，navbar-toggleable-*已重命名为navbar-expand-*，但-xs中缀已被删除( still )，因此在您的情况下，您应使用 navbar-expand .

Bootstrap 4 stable:

In the stable version navbar-toggleable-* has been renamed to navbar-expand-*, but the -xs infix is (still) removed, so in your case you should use navbar-expand.

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

实际上，可折叠的内容下方的响应式导航栏"示例Bootstrap 4文档中的内容完全符合我使用navbar-toggleable-xs类所要查找的内容.我之前没有看到它，因为我没有将窗口缩小得足够窄.

Actually, the Responsive Navbar example below the Collapsible content in Bootstrap 4 documentation does exactly what I was looking for using the navbar-toggleable-xs class. I didn't see it earlier because I didn't make the window narrow enough.

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

In Bootstrap 4 alpha 6, it’s now simply navbar-toggleable without the -xs.

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

EDIT: The documentation link is now here: http://v4-alpha.getbootstrap.com/components/navbar/#nav

这篇关于Bootstrap 4响应式导航栏在xs宽度处折叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！