你能幫助使這個jumbotron bg圖像響應嗎？我已經閱讀了幾個主題，但沒有人能夠工作。謝謝！這裏的HTMLJumbotron幫助響應

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Practice Website 1 Bootstrap</title> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/main.css" rel="stylesheet"> 
</head> 
<body> 
    <!-- Navigational Start Container--> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
      <a href class="navbar-brand">E-DATA TECHNOLOGY</a> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

      <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav navbar-right"> 


      <li class="active"><a href="#">HOME</a></li> 
      <li><a href="#">ABOUT US</a></li> 
      <li><a href="#">LINKS</a></li> 
      <li class="dropdown"> <!-- Dropdown Link Start--> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEDIA<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">FACEBOOK</a></li> 
       <li><a href="#">TWITTER</a></li> 
       </ul> <!-- Dropdown Link End--> 
      </li> 
      <li><a href="#">CONTACT</a></li> 
      </ul> 
      </div> 
    </div> 
    </div> <!-- Navigational Start Container--> 

     <div class="jumbotron"> 
     <h1>Success!!!</h1> 
<p>Removed Jumbotron Padding and Margin/ still not a success 
</p> 
     </div> 


    <div class="container"> <!-- Grid System Content --> 
     <div class="row"> 
     <div class="col-md-4"> 
     <h3><a href="#">LOREM IPSUM DOLOR 1</a></h3> 
     <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit<a class="btn btn-danger">ReadMore</a></p> 
     </div> 
     <div class="col-md-4"> 
     <h3><a href="#">LOREM IPSUM DOLOR 2</a></h3> 
     <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit <a class="btn btn-danger">ReadMore</a></p> 
     </div> 
     <div class="col-md-4"> 
     <h3><a href="#">LOREM IPSUM DOLOR 3</a></h3> 
     <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit. <a class="btn btn-danger">Read More</a></p> 
     </div> 
     </div> 

    </div> 


    <!-- Footer Start--> 
    <div class="navbar navbar-inverse navbar-fixed-bottom"> 
     <div class="container"> 
     <p class="navbar-text pull-left ">KREATIV TECH COPYRIGHT 2014</p> 
     <a href="http:youtube.com"class= "navbar-button btn-danger btn pull-right">Subscribe on Youtube</a> 
    </div> <!-- Footer Start--> 

     <!-- jquery and javascript start script --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="js/bootstrap.js"></script> <!-- JS End Script--> 
</body> 
</html>

這裏是我的自定義CSS

body { 
padding-top: 51px; 
padding-bottom:70px;  
} 

.jumbotron{ 
    background: url(http://wowslider.com/images/demo/pinboard-fly/data/images/dock.jpg) no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 

} 
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
.jumbotron{ 
    background: url(http://wowslider.com/images/demo/pinboard-fly/data/images/dock.jpg) no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    } 
}

我無法使它響應每次我添加填充，底部：200像素，因爲圖像不會出現實際高度。

來源

2014-08-27 JB Vergara

你想要在圖像上顯示哪些文字？或者，超大容量只包含圖像？ – BuddhistBeast 2014-08-27 15:43:17

也許這會工作？ http://jsfiddle.net/1vdfLcyt/2/ – BuddhistBeast 2014-08-27 15:50:25

如果你添加一個背景圖片到div，jumbotron或者其他的div，div的高度，如果沒有被CSS設置，就是div裏面的內容，加上填充。 – Christina 2014-08-28 04:51:39

簡單！使用background-size:100%;

DEMO

.jumbotron { 
      background: url(http://wowslider.com/images/demo/pinboard-fly/data/images/dock.jpg) no-repeat center center; 
      -webkit-background-size: 100% 100%; 
      -moz-background-size: 100% 100%; 
      -o-background-size: 100% 100%; 
      background-size:100%; 
     }

但願這有用！

來源

2014-08-28 09:29:03

好吧，我試過這個，但是會發生什麼事情是推下圖像，文本和背景區域顯示在jumbotron之外我只注意到它不顯示整個圖像但只有一部分。 – 2014-08-28 11:12:47

沒有它的正確唯一，它在jumbotron的範圍內 – 2014-08-28 11:18:13

在全屏我添加一個填充底部：100px;它顯示了我想要的方式。是否可以使用媒體查詢來設置規則，以便在縮放視圖大小時刪除填充樣式？ – 2014-08-28 11:18:19

Jumbotron幫助響應

回答

DEMO

相關問題