正确的方法是向Bootstrap主体添加填充以防止内容和标题重叠

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和bootstrap-responsive.css之间声明填充,以使填充不会在较小的设备上引起问题,从而破坏站点的响应性.

---

我的问题:

我正在使用从Bootstrap定制下载的combinde bootstrap.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">

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

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