向 Bootstrap 正文添加填充以防止内容和标题重叠的正确方法答案

【问题标题】：Correct way to add padding to Bootstrap body to prevent content and header overlap向 Bootstrap 正文添加填充以防止内容和标题重叠的正确方法
【发布时间】：2013-01-28 07:43:31
【问题描述】：

我知道要阻止 Bootstrap 中的主容器位于主体顶部和导航栏后面，您必须像这样添加填充：

<link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

必须在 bootstrap.css 和 bootstrap-responsive.css 之间声明填充，以便填充不会在较小的设备上引起问题，从而破坏网站的响应能力。

我的问题：

我正在使用从Bootstrap customize 下载的combinde bootstrap.css 文件，该文件将响应式css 和普通css 合并到一个文件中。

因为它们被合并到一个文件中，这意味着我不能使用我在这个问题开头描述的解决方案，除非将修复程序实际添加到 bootstrap.css 文件中（我不想在其中添加它，长篇大论）。

所以我在考虑而不是放置这段代码（带有针对较小设备的 @media 修复）：

body {  padding-top: 60px; } 
@media (max-width: 979px) { body { padding-top: 0;  } }

放入我自己的 css 文件 (main.css) 并将其包含在 bootstrap.css 之后的 html 中，如下所示：

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">

您认为这种解决方案可以接受吗？

【问题讨论】：

标签： twitter-bootstrap responsive-design navbar

【解决方案1】：

是的，您的解决方案是可以接受的。

因此，如果您在开始时有一个或两个 Bootstrap 文件的组合，并且您希望拥有导航栏，那么这是在小屏幕上避免大填充的方法：

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
  body {
    padding-top: 60px;
  }
  @media (max-width: 980px) {
    body {
      padding-top: 0;
    }
  }
</style>

【讨论】：

技术上你想要@media (max-width: 979px) {，因为 twitter bootstrap 在 980px 及以上进入默认模式。见twitter.github.io/bootstrap/scaffolding.html#responsive
技术上技术上@media (min-width: 768px) and (max-width: 979px) { ... }

【解决方案2】：

在 Bootstrap 2.3.x 中，我们可以使用 CSS 修复此填充：

body > .container {
  padding-top: 40px;
  background-color: white;
}

/*
 * Responsive stypes
 */
@media (max-width: 980px) {

  body > .container {
    padding-top: 0;
  }
  .navbar-fixed-top {
    margin-bottom: 0;
  }

} /* END: @media (max-width: 980px) */

HTML 文件看起来像这样

<html>
<body>

  <div class="navbar navbar-fixed-top">
   ...
  </div>

  <div class="container">
   ...
  </div>

</body>
</html>

在 Twitter 响应 CSS 文件中，当屏幕宽度小于 980px 时，顶部菜单行具有 class="navbar-fixed-top" 和 margin-bottom: 20px;。

希望这可以帮助某人。

【讨论】：