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

使用上面然后检查。

Answer 2

你错过了Bootstrap示例页面上的重要内容：

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

由于导航栏固定在顶部，因此您需要将主体内容向下推，以便在导航栏后启动。在你的情况下，80px的顶部填充似乎更合适。

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

Answer 3

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

英雄单位没有正确显示

3 个答案: