14

我一直在阅读文档并将我的代码与 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
4

2 回答 2

47

出现视觉异常是因为您在包含文件后定义了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>

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

所以修复很简单：为包含和之间的元素定义顶部填充bodybootstrap.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">
于 2012-04-17T05:12:52.273 回答
23

您可以使用@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>
于 2012-06-24T05:57:10.877 回答