html - 英雄单位显示不正确

Question

我无法让这个英雄单位像 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;
 }

Answer 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

使用上面然后检查。