Série d'images avec boutons en dessous

Bonjour,

Je débute avec bootstrap v3 et le mode responsive, et j'ai quelques difficultés à me séparer de tableaux pour afficher une série de thumbnails avec des boutons en dessous.

Avant j'avais ceci :

Code:

---

1 2 3 4 5 6 7 8

<td style="width:130px;"> <img src="xxx.jpg" width="120px" /> <form action="#" method="post" > <button ... >-</button> &nbsp;&nbsp;<div id="nb_xxx" style="display:inline">1</div>&nbsp;&nbsp; <button ...>+</button> </form> </td>

---

Le principe c'est qu'en dessous de chaque image, il y avait 2 boutons pour ajouter/retrancher. Marche bien sauf pas pratique sur tablette.

Je ne vois pas trop comment faire pour être en mode responsive, sans tableau, tout en gardant le même aspect.
Afficher les images les unes après les autres : ok.
Mais dès que je veux mettre les boutons, je ne sais quelle combinaison de <div>, <span>, style css, ou autre utiliser : soit les boutons se positionnent à côté, soit j'ai une image par ligne.

Si quelqu'un a déjà eu ce problème ou si il sait comment le résoudre, merci d'avance.

JP

Ne jamais faire un post le soir !
Ne jamais faire un post après 2 heures de codage frustrant !

Une erreur de copier/coller (comment est-ce possible?!?) fait qu'il y avait une erreur dans le width. Le boulet.
Corrigé.
Pour info, le code maintenant :

Code:

---

1 2 3 4 5 6 7 8

<div class="container-fluid"><div class="row cards"> <div class="col-xs-12" style="width:130px; " > <img src="xxx.jpg" width="120px" /> <button ... >-</button> &nbsp;&nbsp;<div id="nb_xxx" style="display:inline">1</div>&nbsp;&nbsp; <button ... >+</button> </div> <div class="col-xs-12" style="width:130px; " >...

---