34

我知道要阻止 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">


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

4

2 回答 2

46

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

因此，如果您在开始时有一个或两个 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>
于 2013-02-14T13:09:14.197 回答
4

在 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 文件中，顶部菜单行具有class="navbar-fixed-top"当margin-bottom: 20px;屏幕宽度小于980px.

希望这可以帮助某人。

于 2013-04-15T13:37:04.817 回答