Bootstrap导航栏 - 如何向下浮动navbar-fixed-top?

时间:2013-07-16 18:27:15

标签: twitter-bootstrap

在宽度方面调整浏览器大小时,如何让以下菜单浮动页面/正文?

http://jsfiddle.net/J7jJh/1/show/

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
     // ...

修复工作正常http://jsfiddle.net/WWf3x/show/但我不希望导航栏位于顶部,我无法弄清楚如何使用导航栏固定顶部的边距或浮动将其拉低并推动身体同时向下,也不通过滚动重叠。

1 个答案:

答案 0 :(得分:2)

虽然可能会将navbar-fixed-top与主体一起推下来,但更简洁的解决方案是尝试将响应类应用于navbar,因为BootStrap 2.3似乎不会这样做。如果您决定在将来或其他布局中使用它,这将允许您保持navbar-fixed-top正常工作。

快速查看BootStrap css源代码中navbar-fixed-topnavbar之间的差异,为我们提供了对css的补充。

这是一个有效的demo。以下是要添加的css代码:

.navbar .container{
    width: 940px;
}

@media (min-width: 1200px) {
    .navbar .container
    {
        width: 1170px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .navbar .container
    {
        width: 724px;
    }    
}