N nombre de colonnes dans Bootstrap 4

je crée une boutique en ligne. J'ai besoin d'avoir 3 articles par rangée avec un peu d'espace laissé plus. Donc, mon idée était une colonne de 9 avec 3 colonnes enfant de. Ensuite, il me reste 3 colonnes à partir des 9 pour n'importe quoi d'autre que je choisis.

mon numéro est dans quelques catégories j'ai 4/5 articles. Donc ils apparaissent tous sur une ligne. Comment je peux résoudre ça? 

<div class="container">
    <div class="row">
      <div class="col-md-9">
        <div class="row">
          @foreach ($items as $item)
            <div class="col-md-3">
                <img class="list-image" src="{{$item->image}}">
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
0
demandé sur Zim 2018-03-21 21:51:07

3 réponses

chaque ligne de bootstrap est de 12 cols. Cela n'a pas d'importance si vous prenez votre première rangée seulement 9 cols. Dans la rangée de 9 cols, vous aurez encore 12 cols. La meilleure chose à faire dans votre cas est de calculer plancher 12/<#items>. Ensuite, utilisez la valeur pour déterminer votre taille de col.

0
répondu Reedwanul Islam 2018-03-21 19:09:24

vous ne devez pas utiliser les 12 colonnes. 12 colonnes est juste le maximum disponible. Il y a un certain nombre de façons d'obtenir l'espacement désiré entre les colonnes quand vous n'utilisez pas les 12 colonnes disponibles comme il est dans votre cas.

deux des options possibles serait d'utiliser la classe justify-content-around ou la classe justify-content-between sur la ligne comme si (cliquez sur "Exécuter code snippet" ci-dessous et passer à la pleine page): 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container bg-light my-3">
   <h3 class="text-center pt-2">row justify-content-around</h3>
   <div class="row justify-content-around">
       <div class="col-md-3 bg-warning">Column 1</div>
       <div class="col-md-3 bg-primary">Column 2</div>
       <div class="col-md-3 bg-secondary">Column 3</div>
   </div>
   <h3 class="text-center pt-4">row justify-content-between</h3>
   <div class="row justify-content-between">
       <div class="col-md-3 bg-warning">Column 1</div>
       <div class="col-md-3 bg-primary">Column 2</div>
       <div class="col-md-3 bg-secondary">Column 3</div>
   </div>
</div>

comme vous pouvez le voir, aucune nidification inutile n'est nécessaire là-bas.

c'est parce que ces classes tirent profit des propriétés flexbox.

0
répondu WebDevBooster 2018-03-21 19:16:35

vous pouvez utiliser les Auto-layout colonnes qui sont non limité à 12 .

utiliser .col-auto pour les colonnes dont la taille correspond à leur contenu.. 

<div class="row">
            <div class="col-auto">
                <img class="list-image">
            </div>
            <div class="col-auto">
                <img class="list-image">
            </div>
            <div class="col-auto">
                <img class="list-image">
            </div>
            <div class="col-auto">
                ... to n
            </div>
</div>

ou, utiliser .col pour les colonnes uniformément remplir la ligne.. 

<div class="row">
            <div class="col">
                <img class="list-image">
            </div>
            <div class="col">
                <img class="list-image">
            </div>
            <div class="col">
                ... to n
            </div>
</div>

Démo: https://www.codeply.com/go/wqoiLlSUc5

0
répondu Zim 2018-03-21 20:00:15