Html 如何在较小的介质上处理引导中的响应映像？

嗨，我是一个新的使用引导，我不是很好的处理在引导响应图像。

这是我的问题。 我在992px上有这样的图像结果形成：

但是，当我将屏幕宽度更改为较小的介质（例如：520px）时，图像会与它对齐，没有间隙

它变成这样。

我希望它像这样有填充物（间隙）。

这是我的HTML代码：

<!--two columes 3/1-->
 <div id="first" class="row">
  <div class="col-md-8"><img src="http://placehold.it/640x450"  class="img-responsive"></div>
  <div class="col-md-4"><img src="http://placehold.it/300x450"  class="img-responsive"></div>
</div>

<div id="clean">
<!--two columes 3/1-->

<div id="second" class="row">
  <div class="col-md-8">
  <img src="http://placehold.it/640x100"  class="img-responsive">
  <br>
  <br>
  <img src="http://placehold.it/640x330"  class="img-responsive"></div>

  <div class="col-md-4"><img src="http://placehold.it/300x470"  class="img-responsive"></div>
</div>

<!--two columes half half-->
<div class="row" id="third">
  <div class="col-md-6"><img src="http://placehold.it/470x470"  class="img-responsive"></div>

  <div class="col-md-6"><img src="http://placehold.it/470x470" class="img-responsive"></div>
</div>

<!--four columes-->
<div class="row" id="forth">
  <div class="col-xs-6 col-sm-3"><img src="http://placehold.it/250x250" class="img-responsive"></div>
  <div class="col-xs-6 col-sm-3"><img src="http://placehold.it/250x250" class="img-responsive"></div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-3"><img src="http://placehold.it/250x250" class="img-responsive"></div>
  <div class="col-xs-6 col-sm-3"><img src="http://placehold.it/250x250" class="img-responsive"></div>
</div>

#first
{
padding:20px;
}

#second
{
padding:20px;
}
#third
{
padding:20px;
}
#forth
{
padding:20px;
}

---

Bootstrap不希望增加图像大小-这就是交易。
解决问题的简单方法：
使用此元标记

和媒体查询，如下所示：

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  img {
    width: 700px;
    height: auto;
  }
}

---

这只是一个例子。根据需要更改查询的确切宽度。

您可以使用两组图像

<div id="first" class="row">
    <div class="col-md-8">
        <img src="http://placehold.it/640x450"  class="img-responsive hidden-xs hidden-sm">
        <img src="http://placehold.it/700x450"  class="img-responsive visible-xs visible-sm">
    </div>
    <div class="col-md-4">
        <img src="http://placehold.it/300x450"  class="img-responsive hidden-xs hidden-sm">
        <img src="http://placehold.it/700x450"  class="img-responsive visible-xs visible-sm">
    </div>
</div>

在这种情况下，最好使用2组图像，因为将640x450图像大小重新调整为700x450将改变其纵横比。 您可以在此处阅读有关bootstrap提供的响应实用程序的更多信息：

---

这不是解决问题的方法-这样一些浏览器会加载所有图像，造成带宽浪费。更好的方法是使用类似的东西，以及良好的后备映像。

.img-responsive {
    width: 100%;
}