Html 使引导中的英雄单元符合我的需要

我正在使用Twitter引导，我试图让英雄单元达到页面的最大高度，然后他们可以点击一个按钮，它会进一步向下滚动。我还想在单元底部的英雄单元中显示一些文本

我加了：

身高：100%和
垂直对齐：底部与：
文本对齐：居中

到css文件中的英雄单位，但没有用。看起来你几乎无法编辑它：（

以下是英雄单位类的完整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>


绿色熊猫
专业网页设计


我遗漏了什么吗？如果遗漏了什么？我不明白为什么高度：100%和垂直对齐：底部不起作用。任何建议都是开放的。
要使引导中的英雄单元达到全高，请将此添加到
引导中的
英雄单元

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

要使项目位于引导的
英雄单元
中，请将其直接添加到第一个
span-4

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

您可以随意命名这个div类，只需在
html
和
css
文件中更改名称即可

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