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

回答

相關問題