이 jumbotron bg 이미지가 반응하도록 도와 줄 수 있습니까? 몇 가지 주제를 읽었지 만 누구도 일할 수 없었습니다. 감사! 다음은 여기에 HTML을Jumbotron help responsive

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

아마도 이것이 효과가 있을까요? http://jsfiddle.net/1vdfLcyt/2/ – BuddhistBeast

div, jumbotron 또는 기타에 배경 이미지를 추가하는 경우 CSS의 설정이없는 경우 div의 높이는 div 내부에있는 내용과 패딩입니다. – Christina

간단! 이 유용 할 수있다 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

ok 나는 이것을 시도했다. 그러나 그것이 일어나는 것은 그것이 이미지 전체를 표시하지 않는다는 것을 알아 채신 jumbotron 바깥 쪽의 텍스트와 배경 영역을 보여준다. 그러나 그것의 단지 일부. –

해당 없음, 그 jumbotron –

전체 화면에서 나는 패딩 하단을 추가합니다 : 100px; 내가 원하는 방식으로 보여줍니다. 미디어 쿼리를 사용하여 규칙을 설정하여보기 크기를 조절할 때 패딩 스타일을 제거 할 수 있습니까? –

Jumbotron help responsive

답변

DEMO

관련 문제