Twitter Bootstrap 响应式导航栏在小屏幕上损坏

Posted 2023-03-05

【中文标题】Twitter Bootstrap 响应式导航栏在小屏幕上损坏

【英文标题】：Twitter Bootstrap Responsive Navbar Broken on Small Screens

【发布时间】：2012-04-28 10:44:26

【问题描述】：

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

【参考方案1】：

出现视觉异常是因为您为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>

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

所以解决方法很简单：定义body 元素的顶部填充在您包含bootstrap.css 和bootstrap-responsive.css。

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

【讨论】：

我使用了基本的 Bootstrap 示例，它已经做到了这一点，但它仍然没有解决我的问题。下面的方法有效。

如果你使用 Bootstrap 站点上的自定义工具来获取整个包，那么这也已经包含了响应部分，因此无法在主部分和响应部分之间插入填充指令。还是我误解了什么？

【参考方案2】：

您可以使用 @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>

【讨论】：

在我看来，这是一个更好的解决方案（超过 twitter 引导示例中提供的那个），因为它清楚地将自己的样式与引导/响应基础分开。

@media (min-width: 768px) and (max-width: 979px) ...