Twitter Bootstrap响应式Navbar在小屏幕上破碎

Question

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

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

这是我的jade模板格式的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>