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

原因

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">