0

我不能让这个英雄单元像在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;
 }
4

3 回答 3

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

使用上面然后检查。

于 2013-02-13T07:13:30.070 回答
0

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

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

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

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

于 2013-02-13T07:05:34.407 回答
0

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

于 2013-02-13T07:08:58.483 回答