Bootstrap Jumbotron背景圖片

Question

已經搜索這個網站上下幾個小時，並且無法弄清楚使jumbotron背景圖像響應（我是全新的bootstrap）有什麼問題。我已經嘗試了下面的所有內容，沒有任何工作。調整大小時的圖像將非常伸展，在底部或頂部切斷或擠壓。我試過包含，但這使得圖像太小。

.jumbotron { 
    height:600px; 
    background: url("JoelCanada.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
    } 
.jumbotron { 
    height:600px; 
    background: url("JoelCanada.jpg") no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

這裏是HTML

<div class="jumbotron jumbotron-fluid"> 
    <div class="container jumboText"> 


       <h2> Discover </h2> 
<p> Text </p> 
    <button type="submit" name="countries" class="jumboButton"> Button &#8696 </button> 
    <button type="submit" name="countries" class="jumboButton"> Button &#8696 </button> 
    <button type="submit" name="countries" class="jumboButton"> Button &#8696 </button> 
       </div> 
     </div> 

任何幫助表示讚賞

Answer 1

不知道這是否是故意的，但你應該只風格的.jumbotron類一次。

您的額外類別jumboText使用camelcase，它與當前引導程序類慣例不匹配，使用連字符-。爲了保持一致性，請在全局上設置標題標籤的樣式，並在層次結構中將它們用於HTML層次結構中，並且從頂部的一個頁面開始，然後根據需要級聯。嘗試儘可能多地使用內置類，並儘量減少定製類，併合理使用它們。

瞭解這個也有點無關，但應該因爲你的新來譜寫，以自舉，但你的<button>的應該是使用內置類系統引導btna nchor標籤和在你的CSS樣式全局它們。

下面是與「快速響應」的超大屏幕背景FIDDLE： https://jsfiddle.net/jeremykenedy/p1u3aryv/10/

您可能要直到你更熟悉的框架，經常引用這樣的：

http://getbootstrap.com/css/ http://getbootstrap.com/components/ http://getbootstrap.com/javascript/

FIDDLE顯示的內容：

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <input type="text" placeholder="Email" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <input type="password" placeholder="Password" class="form-control"> 
     </div> 
     <button type="submit" class="btn btn-success">Sign in</button> 
     </form> 
    </div> 
    <!--/.navbar-collapse --> 
    </div> 
</nav> 

<!-- Main jumbotron for a primary marketing message or call to action --> 
<div class="jumbotron"> 
    <div class="container"> 
    <h1>Hello, world!</h1> 
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p> 
    </div> 
</div> 

<div class="container"> 
    <!-- Example row of columns --> 
    <div class="row"> 
    <div class="col-md-4"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Heading</h2> 
     <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    </div> 

    <hr> 

    <footer> 
    <p>&copy; 2016 Company, Inc.</p> 
    </footer> 
</div> 
<!-- /container --> 

CSS：

.jumbotron { 
    background: url(https://s3-us-west-2.amazonaws.com/consultjeremy.com/backgrounds/about-bg.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 600px; 
    color: #ffffff; 
}