twitter bootstrap导航栏固定在左边?

时间:2012-05-14 11:02:57

标签: css twitter-bootstrap

我正在尝试添加一个导航栏,例如使用

固定在顶部的黑色导航栏
 navbar-fixed-top

但修复我希望它在页面的左侧。这将是顶部导航栏的附加功能。因此,顶部有一个导航栏,左侧有一个导航栏。

左侧导航栏将连接到顶部导航栏,因此看起来左侧和顶部有一个边框。

我做了一些黑客尝试,但他们并不是很好。

最好的方法是什么?是否可以使用现有的span和row元素,或者是否需要新的css?

1 个答案:

答案 0 :(得分:7)

我要做的是在顶部栏上设置固定高度,然后在左侧栏上设置固定位置。这是一个jsfiddle,显示我是如何做到的。

http://jsfiddle.net/whoiskb/GqXdM/embedded/result/

最简单的CSS来说明这一点:

the_left_side {
  top:75px; /* the height of the top banner */
  bottom:0px;
  position:fixed;
}
the_main_content {
  position:absolute;
  overflow:auto;
}