Bootstrap Reponsive Grid Problem

Question

Ich verwende Bootstrap und haben folgenden HTML-Code. Ich möchte die linke größere Mediengröße bleiben als Breite: 854px und Höhe: 480px; auf dem normalen Display und reagieren in kompakten Display. Momentan kommt es mit ansprechender Breite, aber die Höhe bleibt gleich. Außerdem möchte ich, dass das Hintergrundbild auch reagiert. Welche Änderungen muss ich anwenden?

`

<div class="row"> 
     <div class="col-md-9"> 
      <a class="img-container" href="javascript: void(0);"> 
       <div class="img-responsive" style="width:854px;height:480px;background-image: url('http://placehold.it/854x480');background-size:100% auto;"></div> 
      </a> 
     </div> 
     <div class="col-md-3"> 

     <div class="media"> 
      <div class="media-left"> 
      <a href="#"> 
       <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
      </a> 
      </div> 
      <div class="media-body"> 
      <h4 class="media-heading">Media heading</h4> 
      <small>08:51</small> 
      </div> 
     </div> 

     <div class="media"> 
      <div class="media-left"> 
      <a href="#"> 
       <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
      </a> 
      </div> 
      <div class="media-body"> 
      <h4 class="media-heading">Media heading</h4> 
      <small>08:51</small> 
      </div> 
     </div> 

     <div class="media"> 
      <div class="media-left"> 
      <a href="#"> 
       <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
      </a> 
      </div> 
      <div class="media-body"> 
      <h4 class="media-heading">Media heading</h4> 
      <small>08:51</small> 
      </div> 
     </div> 

     <div class="media"> 
      <div class="media-left"> 
      <a href="#"> 
       <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
      </a> 
      </div> 
      <div class="media-body"> 
      <h4 class="media-heading">Media heading</h4> 
      <small>08:51</small> 
      </div> 
     </div> 

     <div class="media"> 
      <div class="media-left"> 
      <a href="#"> 
       <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
      </a> 
      </div> 
      <div class="media-body"> 
      <h4 class="media-heading">Media heading</h4> 
      <small>08:51</small> 
      </div> 
     </div> 



     </div> 
    </div> 

</div>` 

Bootply

Answer 1

Sehen Sie sich meine Lösung

<div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="col-md-9"> 
 
    \t \t \t <a class="img-container" href="javascript: void(0);"> 
 
    \t \t \t \t <img class="img-responsive" src="http://placehold.it/854x480"> 
 
    \t \t \t </a> 
 
    \t \t </div> 
 
    \t \t <div class="col-md-3"> 
 

 
    \t \t <div class="media"> 
 
\t \t \t <div class="media-left"> 
 
\t \t \t  <a href="#"> 
 
\t \t \t  <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
 
\t \t \t  </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="media-body"> 
 
\t \t \t  <h4 class="media-heading">Media heading</h4> 
 
\t \t \t  <small>08:51</small> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="media"> 
 
\t \t \t <div class="media-left"> 
 
\t \t \t  <a href="#"> 
 
\t \t \t  <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
 
\t \t \t  </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="media-body"> 
 
\t \t \t  <h4 class="media-heading">Media heading</h4> 
 
\t \t \t  <small>08:51</small> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="media"> 
 
\t \t \t <div class="media-left"> 
 
\t \t \t  <a href="#"> 
 
\t \t \t  <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
 
\t \t \t  </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="media-body"> 
 
\t \t \t  <h4 class="media-heading">Media heading</h4> 
 
\t \t \t  <small>08:51</small> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="media"> 
 
\t \t \t <div class="media-left"> 
 
\t \t \t  <a href="#"> 
 
\t \t \t  <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
 
\t \t \t  </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="media-body"> 
 
\t \t \t  <h4 class="media-heading">Media heading</h4> 
 
\t \t \t  <small>08:51</small> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="media"> 
 
\t \t \t <div class="media-left"> 
 
\t \t \t  <a href="#"> 
 
\t \t \t  <img class="media-object" src="http://placehold.it/150x84" alt="..."> 
 
\t \t \t  </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="media-body"> 
 
\t \t \t  <h4 class="media-heading">Media heading</h4> 
 
\t \t \t  <small>08:51</small> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div>