Bootstrap reponsive grid问题

Question

我正在使用Bootstrap并拥有以下HTML代码。我希望左边更大的媒体尺寸保持宽度：854px和高度：480px;在常规尺寸显示器上，并在紧凑的显示器中响应。目前，它具有响应宽度，但高度保持不变。此外，我希望背景图像也是响应式的。我需要应用哪些更改？

`

    <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

看看我的解决方案

＆＃13;

＆＃13;

<div class="container">
    	<div class="row">
    		<div class="col-md-9"> 
    			<a class="img-container" href="javascript: void(0);">
    				<img class="img-responsive" src="http://placehold.it/854x480">
    			</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>

＆＃13;

＆＃13;

＆＃13;