Bootstrap liste basée sur les tuiles

Question

Je crée une application web qui devrait répertorier les objets collectés à partir de json dans une liste basée sur les tuiles (un peu comme magasinage), où chaque tuile est un div. Quelle est la meilleure façon de le faire dans Bootstrap? J'utilise Angular et je veux le faire avec l'aide de la directive ng-repeat. Si le nombre de divs dépasse la zone d'affichage, la barre de défilement devrait apparaître.

This is graphical view, how I want it to look like.

Quelle est en fait la meilleure façon de mettre en œuvre cette? Merci d'avance.

Answer 1

<div class=container> 
    <div class="row"> 
     <div class="col-sm-4" ng-repeat="tile in tiles"> 
      <div class="panel panel-default"> 
       <div class="panel-header"> 
       {{tile.header}} 
       </div> 
       <div class="panel-body"> 
       {{tile.body}} 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Quelque chose comme ça peut-être? J'utilise col-sm-4, de cette façon 3 tuiles peuvent être visibles à la suite. Lorsque l'écran devient plus petit, puis 700-quelque chose, il sera posé sur l'autre à la place.

Answer 2

Utiliser le système de quadrillage bootstraps. Mettez tous les div dans un conteneur avec la classe .row et marquez le div ng-répété avec .col-sm-4 Ajoutez max-width: et overflow: auto à votre conteneur de sorte que vous obtenez le défilement.

Answer 3

Vous pouvez utiliser la régulière bootstrap grid system

<div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
</div> 

La largeur de la page est de 12 unités, alors divs de largeur 4 vous donnera 3 colonnes. Si vous continuez à ajouter des div avec une largeur totale de plus de 12, il sera placé dans différentes lignes.

Dans l'exemple que je vous ai donné, vous devriez obtenir exactement 2 lignes avec 3 éléments dans chacune.