html - 使 Bootstrap 中的 Hero Unit 符合我的需求

Question

我正在使用 Twitter Bootstrap，我试图让 Hero Unit 占据页面的整个高度，然后他们可以点击一个按钮，它会进一步向下滚动。我还希望在单元底部的英雄单元中显示一些文本。

我添加了:height: 100%; 和 vertical-align:bottom; 以及:text-align:center;

到 css 文件中的 Hero Unit 无济于事。看起来你几乎无法编辑它:(

这是英雄单位类的完整 CSS:

    .hero-unit {
  height: 100%;
  min-height: 649px;
  padding: 60px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
  color: inherit;
  background-color: #eeeeee;
  background-image: url('../img/blured.jpg');
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.hero-unit h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
  color: inherit;
}

.hero-unit li {
  line-height: 30px;
}

英雄单位的 html:

<!--HERO UNIT -->
        <div class="hero-unit"> 
            <div class="container-fluid"> 
                <div class="row-fluid"> 
                    <div class="span4"> 
                        <h4>The Green Panda</h4> 
                    </div>
                    <div class="span4">
                        <p>Professional Web Design</p> 
                    </div>
                    <div class="span4"> 
                        <a href="#professional" class="btn btn-primary btn-large">Learn More</a>
                    </div>
                </div>
            </div>
        </div>

我错过了什么吗？如果是这样呢？我想不通，也不明白为什么 height: 100% 和 vertical-align:bottom 不起作用。任何建议都是开放的。 Here is a fiddle

Answer 1

要在 Bootstrap 中使 Hero Unit 全高，请将其添加到 bootstrap.css 中的 hero-unit

height: 100%;
max-height:900px;
min-height:630px;

要在 Bootstrap 的 hero-unit 中创建元素，请将其直接添加到第一个 span-4

之上

<div class="span-bottom"> 
    //hero unit items 
</div>

然后将以下内容添加到您的bootstrap.css 文件

.span-bottom {
  padding-top: 560px;
}

您可以为这个 div 类命名任何您喜欢的名称，只需确保在 html 和 css 文件中更改名称即可!