Comment gérer l'image réactive dans le bootstrap sur les petits médias?

Salut, je suis nouveau dans l'utilisation de bootstrap et je ne suis pas très bonne tenue de route réactive de l'image dans le bootstrap.

Voici donc ma question.

J'ai des images entraîner la formation de ce genre sur le 992px:

Comment gérer l'image réactive dans le bootstrap sur les petits médias?

mais lorsque je change la largeur de l'écran pour les petits médias (e.g:520px) les images sont en ligne, sans lacunes.

Il devenir comme cela.

Comment gérer l'image réactive dans le bootstrap sur les petits médias?

Je le veux comme ça avec rembourrage(lacunes) en elle.

Comment gérer l'image réactive dans le bootstrap sur les petits médias?

voici mon code 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>

Et voici le CSS:

#first
{
padding:20px;
}

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

Et c'est son violon

InformationsquelleAutor xitas | 2014-03-15