Bootstrap jumbotron太短

我目前正在使用bootstrap建立一个网站。Bootstrap jumbotron太短

这是我的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，例如，我看不到任何更改。我认为这是因为我的超大容量适应了我的容器大小？所以，如果我添加更多的文本，它会增长，但现在它不会。但是，我希望整个画面能够显示，而这种情况现在不会发生。

欢迎任何帮助:)

来源

2016-01-21 pk1914

只是尝试通过直接覆盖'.jumbotron'类*而无需调用'！important'来增加bootply的高度，并且它工作得很好。 –

我想补充这一点，而不一定是说，这是最终的解决方案。我很少碰到任何内置的引导代码并创建我自己的类。这些通常不会对任何可能使用的引导类应用程序造成任何问题。例如。

<div class="jumbotron customclass">

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

这一般总是对我的作品最好的，你避免直接引导这有可能打破你的网站的其它部分，如果你已经拟订了利用位引导搞乱。

我很少直接定位引导类。

你可以从这里你原来bootply看一个例子：http://www.bootply.com/Qcdz3AxWvP

我加入了背景色为好，只是为了展示如何创建自己的类的工作就好了。

来源

2016-01-21 18:18:57 dbrree

我的猜测是bootstrap.css覆盖您有任何自定义CSS。为了解决这个问题，自定义CSS改变高度此height: 500px !important，或之前 bootstrap.css加载CSS文件（请记住，当2个CSS文件中使用时，第一一个加载总是优先，除非使用!important。）

来源

2016-01-21 17:46:12

在您的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 } }

看到整页工作示例代码段。

/*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; }

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

来源

2016-01-21 18:05:52 vanburen

Bootstrap jumbotron太短

回答

相关问题