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 customize下载的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>

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 Responsice CSS文件中，当屏幕宽度小于class="navbar-fixed-top"时，顶部菜单行的margin-bottom: 20px;为980px。

希望这可以帮助某人。

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

我的问题：

2 个答案: