Bootstrap jumbotron太短了(Bootstrap jumbotron too short)

我目前正在使用bootstrap构建一个网站。

这是我的HTML文件：

http://www.bootply.com/D5ltZOOcQE

<header class="navbar navbar-inverse navbar-static-top" role="banner"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">Santorini</a> </div> <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav navbar-right"> <li><a href="committee.html">Committee</a></li> <li><a href="events.html">Events</a></li> <li><a href="constitution.html">Constitution</a></li> </ul> </nav> </div> </header> <div class="jumbotron"> <div class="container"> <h1>Welcome</h1> <p class="lead">Welcome to my website.</p> <p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a></p> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-4" align="center"> <a href="www.google.com"><img class="contact" src="img/facebook.png" height="120" width="120"></a> </div> <div class="col-sm-4" align="center"> <a href="www.google.com"><img class="contact" src="img/emailIcon.png" height="120" width="120"></a> </div> <div class="col-sm-4" align="center"> <a href="www.google.com"><img class="contact" src="img/twitter.png" height="120" width="120"></a> </div> </div> </div>

所以，我想要做的就是拥有一个巨大的巨无霸，类似于getboostrap.com网站。这意味着我希望它至少是我目前的超大尺寸的两倍。

在我的HTML文件的<head>中，我有一个地方，我为我的jumbotron设置了一个特殊的规则，所以我包括图片和其他一些东西。这是代码：

.jumbotron { position: relative; background: url('img/background.jpg') no-repeat center center; overflow: hidden; height: 100%; width: 100%; background-size: cover; }

但是，当我将高度的大小更改为500px时，我看不到任何变化。我想这是因为我的jumbotron适应我的容器的大小？所以，如果我添加更多的文本，它会增长，但现在它不会。但是，我想要展示整个图片，而这现在不会发生。

欢迎任何帮助:)

I am currently building a website using bootstrap.

This is my HTML file:

http://www.bootply.com/D5ltZOOcQE

So, what I wanted to do is have a big jumbotron, similar to the one in the getboostrap.com website. That means I wanted it at least twice the size of my current jumbotron.

In the <head> of my HTML file, I have a place where I have put a special rule for my jumbotron, so that I include the picture and also some other stuff. This is the code:

.jumbotron { position: relative; background: url('img/background.jpg') no-repeat center center; overflow: hidden; height: 100%; width: 100%; background-size: cover; }

However, when I change the size of height to 500px for example, I see no change. I think this is because my jumbotron kind of adapts to the size of my container? So if I add more text it will grow but now it doesn't. However, I want the whole picture to show, and this doesn't happen right now.

Any help is welcome :)

最满意答案

只是为了增加这一点，并不一定说这是最终的解决方案。我很少触及任何内置的bootstrap代码并创建自己的类。这些通常对您可能正在使用的任何引导类没有任何问题。例如。

.customclass { width: 100%; height: 500px; }

这通常总是对我有用，你可以避免直接搞乱bootstrap，如果你已经设计了很多利用bootstrap的话，可能会破坏你网站的其他部分。

我很少直接针对bootstrap类。

你可以在这里看到你原来的bootply的例子： http : //www.bootply.com/Qcdz3AxWvP

我还添加了一个背景颜色，只是为了展示创建自己的类是如何工作的。

Just to add to this, and not necessarily saying this is the ultimate solution. I rarely touch any of the built in bootstrap code and create my own classes. These normally will apply no problem to any bootstrap classes you may be using. for instance.

.customclass { width: 100%; height: 500px; }

This generally always works for me best and you avoid messing with bootstrap directly which could potentially break other portions of your website if you have already designed quite a bit utilizing bootstrap.

Very rarely do I ever target bootstrap classes directly.

You can see an example from your original bootply here: http://www.bootply.com/Qcdz3AxWvP

I added a background color as well, just to show how creating your own class works just fine.

更多推荐