我一直在阅读文档,并将我的代码与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
解决方法
出现视觉异常,因为您在包含引导响应css文件后定义了body元素的顶部填充,这意味着“响应”样式无法覆盖您的填充：
<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>
当页面以全宽显示时,您希望使用填充(以便您的主要内容不会显示在顶部导航栏下),但是当缩小浏览器宽度时,您希望“响应”样式覆盖该填充(或在移动设备上显示页面).
所以修复很简单：在包含bootstrap.css和bootstrap-responsive.css之间定义body元素的顶部填充.
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">
