分享 Bootstrap 使用响应式设计 (Responsive design) 时导航条上部有空白的解决方案

siyang1982 · 2012年03月07日 · 最后由 lgn21st 回复于 2012年03月12日 · 10529 次阅读

原因

Bug 出现需要同时满足以下 3 个条件:

  • 顶部导航条 navbar 使用 classnavbar-fixed-top
  • 参考 Bootstrap 官方网站,给 body 添加样式padding-top: 60px;
  • 使用响应式 (Responsive design), 并且处在此状态下 (默认为宽度<=980 时触发)

解决方案 1

给此段样式加上条件

@media (min-width: 981px) {
    body {
        padding-top: 60px;
    }
}

解决方案 2

将 bootstrap-responsive.css 放在 body 样式之后

<link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
      body {
        padding-top: 60px;
      }
</style>
<link href="../css/bootstrap-responsive.css" rel="stylesheet">

结论

我在某项目中因为使用的是 customize 出来的单个 css 文件,所以采用了解决方案 1.
在另一 RoR 项目中考虑使用解决方案 2.

参考

navbar-fixed-top breaks when using responsive css 原文

Ruby China 之前用的时候是 1.4,一直都还没升级上去。

正好遇到这个 bug,感谢楼主分享。

#1 楼 @huacnlee 升级改动的确挺大的。

#2 楼 @daqing 恩,用 2.0 的人预计>30% 会遇到此问题。 当时发现这个 bug 时看了站里几个朋友的网站也有这个问题,所以就转来了。

谢谢楼主分享。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号