Bootstrap:垂直导航栏响应切换到水平?

时间:2013-10-07 23:26:52

标签: html css3 twitter-bootstrap twitter-bootstrap-3

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

[Navigation,col-md-1] [补充工具栏,col-md-3] [内容,col-md-8]

我的导航是垂直堆叠的,如下所示:

[导航1]

[导航2]

[导航3]

(导航是UL,每个项目都是LI。)

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

任何指针?

1 个答案:

答案 0 :(得分:1)

如果您想让它消失并获得良好的替换,您可能需要使用Bootstrap的默认导航。

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

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

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

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