在Bootstrap中制作英雄单位符合我的需要

Question

我正在使用Twitter Bootstrap,我试图让Hero Unit达到页面的整个高度,然后他们可以点击一个按钮然后向下滚动.我还想在单位底部的英雄单位中显示一些文字.

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

在css文件中的英雄单位无济于事.它几乎看起来像你无法编辑它:(

以下是Hero Unit Class的完整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%和vertical-align:bottom不起作用.任何建议都是开放的.这是一个小提琴

Answer 1

要在Bootstrap中使Hero Unit达到全高,请将其添加到hero-unitin中bootstrap.css

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

要使hero-unitBootstrap中的项目直接添加到第一个项目之上span-4

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

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

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

您可以将此div类命名为您喜欢的,只需确保更改html和css文件中的名称即可!