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.cssbootstrap-responsive.css.

Bootstrap示例是一个很好的模板,可用于入门.该流体布局网站确实是这样的:

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