你能帮助这个jumbotron bg图像做出响应吗？我读过好几个题目，但都没读出来。谢谢这是HTML
<!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%;
}
}
每次我添加填充底部时，我都无法使其响应：200px，因为图像不会显示实际高度。
简单！使用background-size:100%;
演示
.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%;
}
希望这可能有用！