Twitter Bootstrap响应式Navbar破碎在小屏幕上 [英] Twitter Bootstrap Responsive Navbar Broken on Small Screens

问题描述

我一直在阅读文档，并将我的代码与Bootstrap的例子进行比较，但是我不知道为什么当我把浏览器窗口缩小或者在手机上查看时，我的网站上的navbar下降了大约100像素。

I've been reading the docs and comparing my code to Bootstrap's examples, but I cannot figure out why the navbar on my site drops down about 100px when I make my browser window smaller or view it on a phone.

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

这是我的jade模板格式的html。

Here's my html in jade template format.

.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

推荐答案

出现视觉异常，因为您定义了<包含 bootstrap-responsive.css 文件之后的code> body 元素 样式无法覆盖您的填充：

The visual anomaly appears because you defined the top padding for the body element after including the bootstrap-responsive.css file, which means that the "responsive" styles are unable to override your padding:

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

您希望在页面全屏显示时使用填充不会显示在顶部导航栏下面），但是您希望收缩浏览器宽度（或在移动设备上显示页面）时，响应式样式覆盖该填充。

You want the padding to be used when the page is displayed at full width (so that your main content doesn't get displayed underneath the top navbar), but you want the "responsive" styles to override that padding when you shrink the browser width (or display the page on a mobile device).

所以修正很简单：定义 body / em>包含 bootstrap.css 和 bootstrap-responsive.css

So the fix is simple: define the top padding for the body element between your inclusion of bootstrap.css and bootstrap-responsive.css.

Bootstrap示例是开始使用的好模板。 流体布局网站喜欢这样：

The Bootstrap samples are a great template to use to get started. The fluid layout site does it like this:

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

这篇关于Twitter Bootstrap响应式Navbar破碎在小屏幕上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！