twitter-bootstrap – 正确的方式添加填充到Bootstrap主体,以防止内容和标题重叠

我理解，为了阻止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之间声明，以便填充不会导致较小设备出现问题，从而破坏站点的响应能力。

我的问题：

我使用combinde bootstrap.css文件从Bootstrap customize下载，它有响应和正常的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">

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

解决方法

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

所以如果你有一个或两个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>