2

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

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

到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>

我错过了什么吗？如果是这样呢？我无法弄清楚这一点，也不明白为什么 height: 100% 和 vertical-align:bottom 不起作用。任何建议都是开放的。这是一个小提琴

4

1 回答 1

5

要在 Bootstrap 中使 Hero Unit 全高，请将其添加到hero-unitinbootstrap.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;
}

html你可以为这个 div 类命名任何你喜欢的名字，只要确保在文件和文件中都更改名称css！

于 2013-05-15T21:30:10.930 回答