webentwicklung-frage-antwort-db.com.de

Schleife Zeile in Bootstrap alle 3 Spalten

Ich möchte, dass jede Zeile auf meiner Seite 3 Miniaturbilder anzeigt, die jedoch in einer Zeile gestapelt sind. 

Wie schaffe ich das Looping? Vielen Dank...

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

<?php
}
?>

Dieser Code generiert gestapelte Miniaturbilder in einer Reihe. Wie kann ich die Zeile für jeweils 3 Spalten generieren?

Diesen Screenshot habe ich aus dem Code bekommen:

 Thisis What i got

Das ist es, was ich suche:

 This is what i want.

phptwitter-bootstrapcodeigniter
5
Mochamad Ramdanny Lukman

Edit: Ursprünglich habe ich das schnell aus meinem Kopf gepostet. Danke an Wael Assaf für den Hinweis auf eine Verbesserung, die ich verwendet habe. Außerdem habe ich einige Änderungen am Code vorgenommen. Jetzt ist er vielseitig und kann für eine variable Anzahl von Spalten verwendet werden, die Sie durch Ändern der Variablen $ numOfCols auswählen können

Sie müssen für jede Zeile ein Div hinzufügen. Dann werden die gleitenden Divs, die Sie haben, nicht nur umgebrochen, sondern befinden sich in einem eigenen Container.

Die Bootstrap-Klasse row ist dafür perfekt:

<?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>

Verwendet den PHP-Modulus-Operator, um das Öffnen und Schließen jeder Zeile an den richtigen Punkten anzuzeigen.

Hoffe das hilft.

43
dading84

Sie können die Funktion array_chunk(input array, size of each chunk) verwenden, um Ihr Array in Stücke zu teilen.
php.net Handbuch: array_chunk

Teilt ein Array in Arrays mit Größenelementen. Der letzte Block kann weniger als Größenelemente enthalten.

Hier ist ein Beispiel: 

<?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

Zuerst sollten Sie eine Variable definieren, dann unmittelbar vor dem Ende der Schleife die Variable inkrementieren und das schließende Zeilen-Tag wiederholen und abhängig davon eine weitere öffnen.

Nützliche Schritte

  • $i = 0; definieren
  • in der Schleife machen Sie Ihre Echos.
  • direkt vor dem Ende von foreach erhöhen Sie den $i++ und machen eine Bedingung: Wenn $i % 3 == 0 den schließenden Tag der Zeile echo, dann erzeugen Sie eine neue Zeile.

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>

Tipp: Sie möchten die Reihe nicht wirklich erkunden, es ist eine schlechte Idee, eine Reihe zu erstellen und die Gegenstände zu suchen.

8
Wael Assaf

Keine Notwendigkeit für all diese Komplexität. Bootstrap arbeitet automatisch in einem 12-Col-Rastersystem. Stellen Sie einfach sicher, dass Sie eine Schleife bilden und die Größe der Spalte so einstellen, dass sie gleichmäßig durch 12 geteilt wird, z. col-md-4.

In diesem Beispiel werden automatisch 3 pro Zeile bereitgestellt, da 12/4 = 3 ist.

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

Einfache und einfache Lösung

    $array = array('0' => 'ABC', '1' => 'DEF', '2' => 'GHI', '3' => 'JKL', '4' => 'MNO', '5' => 'PQR', '6' => 'STU', '7' => 'VWX', '8' => 'YZ' );

    $index = 0;
    $n_array = array();
    foreach ($array as $key => $value) {
        if ($key % 3 == 0) {
            $index++;
        }
        $n_array[$index][] = $value;
    }
    foreach ($n_array as $key => $values) {
    ?>
        <div class="row">
            <?php 
                foreach ($values as $value) {
                    echo "<div class='col-md-4'>".$value."</div>";
                }
            ?>
        </div>
    <?php 
    }
0
Jatin Kumar

Dies ist ein besserer way - um die Funktion chunk () von Collections zu verwenden. 

`@foreach($items->chunk(5) as $chunk)
        <ul>
            @foreach($chunk as $item)
                Item {{ $loop->iteration }}
            @endforeach 
        </ul>
 @endforeach`
0
Aosu Terver
    <div class="row">
<?php
    foreach ($rows as $row){
?> 
     <div class="col-lg-4 col-sm-4 col-6">
     Your content
     </div>
<?php } ?>
    </div>

Dies ergibt drei Spalten in jeder Zeile.

0
Robert

Einfache benutzerdefinierte CSS-Lösung ... Zielzeilen in .listing Wrapper mit bottom-margin, letzte Zeile hat kein margin-bottom.

HTML

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

CSS

.listing .row {
    margin-bottom: 20px;
}

.listing .row:last-child {
    margin-bottom: 0;
}
0
ajmedway