Bootstrap 4 responsive navbar that collapses at xs width?

问题

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.

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

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

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

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.

Edit:

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.

回答1:

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.

Explanation in the docs: https://getbootstrap.com/docs/4.1/components/navbar/#how-it-works

Only for Bootstrap 4 alpha:

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.

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

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

来源：https://stackoverflow.com/questions/33321110/bootstrap-4-responsive-navbar-that-collapses-at-xs-width