Question

我目前正在使用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适应我的容器的大小？因此，如果我添加更多文本，它会增长，但现在却没有。但是，我想要展示整个图片，现在这种情况不会发生。

欢迎任何帮助：）

Answer 1

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

<div class="jumbotron customclass">

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

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

我很少直接针对引导类。

您可以在此处查看原始bootply中的示例：http://www.bootply.com/Qcdz3AxWvP

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

Answer 2

在您的Bootply中，您将高度设置为100％，并且您的问题表明500px这可能很重要，也可能不是。 Jumbotron类没有设置高度，而是使用填充。设置高度应该与你问题中的规则没有什么不同，所以你可能有多个jumbotron规则，或者你没有在引导之后放置样式表。

*（您应该零使用!important）

引导规则（未完成）

.jumbotron { padding-top: 30px; padding-bottom: 30px; margin-bottom: 30px; color: inherit; background-color: #eee } .container .jumbotron, .container-fluid .jumbotron { padding-right: 15px; padding-left: 15px; border-radius: 6px } .jumbotron .container { max-width: 100% } @media screen and (min-width:768px) { .jumbotron { padding-top: 48px; padding-bottom: 48px } .container .jumbotron, .container-fluid .jumbotron { padding-right: 60px; padding-left: 60px } .jumbotron .h1, .jumbotron h1 { font-size: 63px } }

请参阅FullPage上的工作示例代码段。

＆＃13;
＆＃13;
/*FOR DEMO ONLY*/ .navbar.navbar-inverse { margin-bottom: 0; } /*FOR DEMO ONLY*/ .jumbotron.jumbotron-one { position: relative; background: url('http://placehold.it/2000x500/f00/fff') no-repeat center center; background-size: cover; height: 100%; width: 100%; margin-bottom: 0; } @media (min-width: 768px) { .jumbotron.jumbotron-one { height: 500px; } } .jumbotron.jumbotron-two { position: relative; background: url('http://placehold.it/2000x500/ff0/fff') no-repeat center center; background-size: cover; }
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <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 jumbotron-one"> <div class="container"> <h1>Welcome</h1> <p class="lead">Height 500PX</p> <p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a> </p> </div> </div> <div class="jumbotron jumbotron-two"> <div class="container"> <h1>Welcome</h1> <p class="lead">Default Height (padding)</p> <p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a> </p> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

我的猜测是bootstrap.css覆盖了你拥有的任何自定义css。要更正此问题，请将自定义css高度更改为此height: 500px !important，或者在 bootstrap.css之前加载css文件（请记住，当使用2个CSS文件时，第一个一个加载始终优先，除非使用!important。）

Bootstrap jumbotron太短了

3 个答案: