Question

我正在使用Twitter Bootstrap，我正在尝试将Hero Unit设置为页面的整个高度，然后他们可以单击一个按钮并进一步向下滚动。我还想在单位底部的英雄单位中显示一些文字。

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

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

以下是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不起作用。任何建议都是开放的。 Here is a fiddle

Answer 1

要使Bootstrap中的英雄单位达到全高，请将其添加到hero-unit中的bootstrap.css

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文件中的名称！

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

1 个答案: