html - Bootstrap : Vertical navbar that responsively switches to horizontal?

Question

我有一个响应式 Bootstrap 3 布局正在进行中。它具有以下一般形状:

[导航，col-md-1][侧边栏，col-md-3][内容，col-md-8]

我的导航是垂直堆叠的，像这样:

[导航 1]

[导航 2]

[导航 3]

(Nav是一个UL，每个item是一个LI。)

当我按预期调整设计大小时，边栏和内容会在导航“下方”滑动。但是当设计切换时，我的导航不需要占用相同的高度。我想要的是当我超过响应阈值时 Nav 切换到列。这样它会占用更少的空间。或者，我会很高兴它完全消失。

有什么指示吗？

Answer 1

如果您希望它消失并被很好地替换，您可能需要使用 Bootstrap 的默认导航。

否则，您应该使用不同大小的列。如果您将 col-xs-1 用于导航，它不会在较小的屏幕尺寸下切换到 100% 宽度。

或者，如果你想让它消失，你应该查看:http://getbootstrap.com/css/#responsive-utilities

将 .hidden-xs 添加到导航会使其在较小的屏幕尺寸下消失。

这些的一些组合应该可以解决您的问题。