Twitter Bootstrap 响应式导航栏在小屏幕上损坏

Question

我一直在阅读文档并将我的代码与 Bootstrap 的示例进行比较，但是当我缩小浏览器窗口或在手机上查看时，我无法弄清楚为什么我的网站上的导航栏下降了大约 100 像素。

http://warm-ocean-8133.herokuapp.com/

这是我的翡翠模板格式的html。

.navbar.navbar-fixed-top
  .navbar-inner
    .container
      a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.brand(href='#home') Miles Matthias
      .nav-collapse
        ul.nav
          li.active
            a(href='#home') Home
          li
            a(href='#contact') Contact

Answer 1

出现视觉异常是因为您为body 元素之后 定义了顶部填充，包括bootstrap-responsive.css 文件，这意味着“响应式”样式无法覆盖您的填充：

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

您希望在页面以全宽显示时使用填充（这样您的主要内容不会显示在顶部导航栏下方），但您希望“响应式”样式在您缩小时覆盖该填充浏览器宽度（或在移动设备上显示页面）。

所以解决方法很简单：定义body 元素的顶部填充在您包含bootstrap.css 和bootstrap-responsive.css。

The Bootstrap samples 是一个很好的入门模板。 fluid layout 网站是这样做的：

<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .sidebar-nav {
    padding: 9px 0;
  }
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

Answer 2

您可以使用 @media 来覆盖正文填充。 像这样：

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
  }
  @media (max-width: 979px) {
    body {
      padding-top: 0;
    }
  }
</style>