web-dev-qa-db-fra.com

Ligne de boucle dans le bootstrap toutes les 3 colonnes

Je veux que chaque ligne de ma page affiche 3 vignettes, mais empilées sur une ligne. 

Comment gérer le bouclage? Je vous remercie...

<?php
    foreach ($rows as $row){
?>  
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="user_file/<?php echo $row->foto; ?>">
            </div>
        </div>

<?php
}
?>

Ce code génère des vignettes empilées dans une ligne. Comment puis-je générer la ligne pour chaque 3 colonnes?

Cette capture d'écran est ce que j'ai obtenu du code:

 Thisis What i got

C'est ce que je cherche à obtenir:

 This is what i want.

phptwitter-bootstrapcodeigniter
5
Mochamad Ramdanny Lukman

Edit: À l'origine, j'ai posté ceci rapidement du haut de ma tête. Merci Wael Assaf pour avoir signalé une amélioration que j'ai utilisée. J'ai également ajouté quelques modifications au code. Il est maintenant polyvalent et peut être utilisé pour un nombre variable de colonnes que vous pouvez choisir en modifiant la variable $ numOfCols.

Vous devez ajouter un div pour chaque ligne. Ensuite, les divs flottants que vous avez ne seront pas simplement emballés mais placés dans leur propre conteneur.

La classe de bootstrap row est parfaite pour cela:

<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 4;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
?>
<div class="row">
<?php
foreach ($rows as $row){
?>  
        <div class="col-md-<?php echo $bootstrapColWidth; ?>">
            <div class="thumbnail">
                <img src="user_file/<?php echo $row->foto; ?>">
            </div>
        </div>
<?php
    $rowCount++;
    if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
}
?>
</div>

Utilise l’opérateur php module pour faire écho aux ouvertures et aux fermetures de chaque rangée aux bons points.

J'espère que cela t'aides.

43
dading84

Vous pouvez utiliser la fonction array_chunk(input array, size of each chunk) pour diviser votre tableau en morceaux.
Manuel php.net: array_chunk

Morceaux d'un tableau en tableaux avec des éléments de taille. Le dernier morceau peut contenir moins que des éléments de taille.

Voici un exemple: 

<?php

    $numberOfColumns = 3;
    $bootstrapColWidth = 12 / $numberOfColumns ;

    $arrayChunks = array_chunk($items, $numberOfColumns);
    foreach($arrayChunks as $items) {
        echo '<div class="row">';
        foreach($items as $item) {
            echo '<div class="col-md-'.$bootstrapColWidth.'">';
            // your item
            echo '</div>';
        }
        echo '</div>';
    }  
?>
15
Pars

Vous devez d’abord définir une variable, puis juste avant la fin de la boucle, incrémentez-la, répétez la balise de la ligne de fermeture et ouvrez-en une autre en fonction de celle-ci.

Étapes utiles

  • définir $i = 0;
  • dans la boucle faites vos échos.
  • juste avant que le foreach se termine incrémente le $i++ et pose une condition: if $i % 3 == 0 puis renvoie la balise de fermeture de la ligne, puis génère une nouvelle ligne.

Code:

<div class='row'>
<?php
foreach($items as $item) {
  echo "<div class='col-lg-2'>";
      echo "<div class='item'>";
        echo 'Anythin';
      echo '</div>';
  echo '</div>';
  $i++;
  if ($i % 3 == 0) {echo '</div><div class="row">';}
}
?>
</div>

Astuce: vous ne voulez pas vraiment aller dans chaque rangée, c’est une mauvaise idée, créez une rangée et allez dans chaque objet.

8
Wael Assaf

Pas besoin de toute cette complexité. Bootstrap fonctionne automatiquement dans un système de grille de 12 colonnes. Assurez-vous simplement de boucler et de créer une taille de col, de manière à diviser également par 12, par exemple col-md-4.

Cet exemple fournira 3 par ligne automatiquement puisque 12/4 = 3.

<div class="row">
    LOOPCODE
    {
        <div class="col-md-4">
            DATA
        </div>
    }
</div>
2
Chris Go

C’est une meilleure méthode way - d’utiliser la fonction chunk () de Collections. 

`@foreach($items->chunk(5) as $chunk)
        <ul>
            @foreach($chunk as $item)
                Item {{ $loop->iteration }}
            @endforeach 
        </ul>
 @endforeach`
0
Aosu Terver