bootstrap 3.0 responsive 5 images dans une rangée

J'ai un problème avec bootstrap 3.0 5 images dans une Rangée et les faire ces réactif ?
Le système de grille est basée sur de 12 , donc comment faire 5 images et ils ont l'air centré sans espaces ?

Aussi est-il loin je peux faire lors de l'affichage sur des tablettes ou des smartphones <480 px 2 images par raw? droit maintenant, il montre 5 images les uns des autres??

voici mon code:

<div class="row">
 <div class="col-md-2">
 <img class="img-responsive" src="/images/img1.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
 <img class="img-responsive" src="/images/img3.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
  <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

Comme vous pouvez le voir je suis à l'aide de col-md-2 avec img-responsive? mais sa ne fonctionne pas vraiment, parce que ses pas centré

source d'informationauteur user3150060

  1. 10

    Vous pourriez avoir une colonne vide de chaque côté:

    <div class="row">
 <div class="col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>
  2. 8

    Pour répondre à votre autre question:

    Aussi est-il loin je peux faire lors de l'affichage sur des tablettes ou des smartphones
    <480 px 2 images par raw? droit maintenant, il montre 5 images sous chaque
    les autres??

    La réponse est oui. Hors de la boîte, à l'aide de col-xs-6 en outre, vous obtiendrez 2 images par ligne pour toutes les fenêtres de moins de 768px.

    <div class="row">
 <div class="col-xs-6 col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

    Si vous voulais personnaliser Bootstrap par less, SASS ou à l'aide de la customizer ici: http://getbootstrap.com/customize/vous peut certainement s'adapter à la fois les colonnes de la grille et les points d'arrêt. Ce que je veux dire par là, c'est que vous pouvez faire un 10 colonne de la grille ou un 5 colonne de la grille et si vous préférez avoir votre xs point d'arrêt à 480px, vous pouvez le faire aussi.

    À faire que vous auriez besoin de modifier le système de grille de valeurs: http://getbootstrap.com/customize/#grid-system et la http://getbootstrap.com/customize/#media-queries-breakpoints

    C'est encore Bootstrap avec toute sa bonté, c'est juste une version personnalisée de vos besoins.

  3. 2

    Vous avez besoin pour créer une colonne de la classe (je l'ai appelé col-sm-5colsmais appelez ça comme vous voulez), avec un style tout comme Bootstrap de colonnes existantes, et puis de lui donner 20% de la largeur quand à la bonne taille, la via media query.

    .col-sm-5cols{
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

@media (min-width: 768px) {
.col-sm-5cols {
        width: 20%;
        float: left;
    }
}

    Exemple: http://www.bootply.com/YpKhYwVqfD

    Et pour obtenir votre 2 configuration de colonne sur mobile, vous pouvez utiliser col-sm-6 de l'approcher, ou encore de personnaliser un petit colonnes avec les médias de la requête à 480px et width:50%