[英]Twitter Bootstrap Responsive Navbar Broken on Small Screens
我一直在阅读文档,并将我的代码与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
出现视觉异常是因为您在包含bootstrap-responsive.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
元素的顶部填充 。
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">
您可以使用@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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.