html - Bootstrap：响应切换到水平的垂直导航栏？

Question

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

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

我的导航是垂直堆叠的，如下所示：

[导航 1]

[导航 2]

[导航 3]

（Nav 是一个 UL，每个项目都是一个 LI。）

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

任何指针？

Answer 1

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

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

或者，如果您希望它消失，您应该查看： http: //getbootstrap.com/css/#responsive-utilities

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

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