Bootstrap：垂直导航栏可以响应地切换到水平吗？

Question

I have a responsive Bootstrap 3 layout in progress. It has the following general shape:

[Navigation, col-md-1][Sidebar, col-md-3][Content, col-md-8]

My navigation is vertically stacked, like this:

[Nav 1]

[Nav 2]

[Nav 3]

(Nav is a UL, each item is an LI.)

When I resize my design, as expected, the sidebar and content slide "under" the navigation. But my nav doesn't need to take up the same height when the design switches. What I'd like is for the Nav to switch to columns when I cross the responsive threshold. That way it will take up less space. Alternatively, I'd be happy for it to disappear completely.

Any pointer?

Answer 1

You might want to use Bootstrap's default nav if you want it to disappear and get replaced nicely.

Otherwise, you should play around with different sized columns. If you use col-xs-1 for the nav it won't switch to 100% width with smaller screen sizes.

Alternatively, if you want it to disappear, you should check out: http://getbootstrap.com/css/#responsive-utilities

Adding the .hidden-xs to the nav will make it disappear at smaller screen sizes.

Some combination of these should solve your problem.