在引导体中添加填充以防止内容和页眉重叠的正确方法

Question

我知道要阻止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和引导-responsive.css之间声明，这样填充就不会在较小的设备上引起问题，从而破坏站点的响应能力。

我的问题是：

我使用从bootstrap.css下载的组合引导自定义文件，它将响应性和普通的css组合成一个文件。

因为它们被组合成一个文件，这意味着如果不将修复程序实际添加到bootstrap.css文件中，我就不能使用我在这个问题开头描述的解决方案(长话短说，我不想将它添加到其中)。

因此，我考虑的不是把这段代码(为较小的设备使用@media补丁)：

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

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

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

你认为这个解决方案可以接受吗？

Answer 1

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

因此，如果在开头有一个或两个合并的引导文件，并且希望有导航条，这是避免在较小屏幕上出现大填充的方法：

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

Answer 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文件中，当屏幕宽度小于class="navbar-fixed-top"时，顶部菜单线上有margin-bottom: 20px;和980px。

希望这能帮到别人。