html – Twitter Bootstrap响应式Navbar在小屏幕上打破

概述我一直在阅读文档,并将我的代码与Bootstrap的示例进行比较,但是我不清楚为什么当我的浏览器窗口较小或在手机上查看时,我的网站上的导航栏下降了大约100像素. http://warm-ocean-8133.herokuapp.com/ 这是我的翡翠模板格式的html. .navbar.navbar-fixed-top .navbar-inner .container a 我一直在阅读文档,并将我的代码与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">

总结

以上是内存溢出为你收集整理的html – Twitter Bootstrap响应式Navbar在小屏幕上打破全部内容，希望文章能够帮你解决html – Twitter Bootstrap响应式Navbar在小屏幕上打破所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。