英雄单位显示不正确答案

【问题标题】：Hero-unit not displaying right英雄单位显示不正确
【发布时间】：2013-07-19 06:03:47
【问题描述】：

我无法让这个英雄单位像 http://twitter.github.com/bootstrap/examples/hero.html# 那样使用这个原始 CSS 移动中心 -

.hero-unit {
  padding: 60px;
  margin-bottom: 0px;
  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  color: inherit;
  background-color: #eeeeee;
  border:1px solid #cacaca;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

看看我在http://www.magnixsolutions.com/dev/test/test.html上做了什么

我的 CSS 与下面的原始文件相同。我不明白发生了什么。

.hero-unit {
  padding: 60px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  background-color: #eeeeee;
  border:1px solid #cacaca;
  -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
          border-radius: 10px;
 }

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

你错过了两件事 1 是

//来自 hero.html 源码

body {
   padding-top: 60px;
   padding-bottom: 40px;
}

还有一个是

.container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px;
}

以上css来自http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

使用上面然后检查。

【讨论】：

【解决方案2】：

您错过了 Bootstrap 示例页面上的一些重要内容：

  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }

由于导航栏固定在顶部，您需要将正文内容向下推，使其在导航栏之后开始。在您的情况下，顶部填充 80 像素似乎更合适。

顺便说一句，jquery 对你的问题来说并不是一个有用的标签。

【讨论】：

【解决方案3】：

你有固定的header，需要在body标签上设置padding-top。

【讨论】：