web-dev-qa-db-ja.com

bootstrap= 3列ごとのループ行

ページのすべての行に3つのサムネイルを表示したいが、1つの行に重ねて表示したい。

ループをどのように管理しますか？ありがとうございました...

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

<?php
}
?>

このコードは、積み重ねられたサムネイルを連続して生成します。 3列ごとに行を生成するにはどうすればよいですか？

このスクリーンショットは、コードから得たものです。

Thisis What i got

これは私が取得したいものです：

This is what i want.

phptwitter-bootstrapcodeigniter
9
Mochamad Ramdanny Lukman

編集：もともと、私は頭の上からこれをすばやく投稿しました。私が使用した改善を指摘してくれたWael Assafに感謝します。また、コードに2、3の変更を追加しました。これは汎用性があり、変数$ numOfColsを変更することで選択できる可変数の列に使用できます。

行ごとにdivを追加する必要があります。次に、あなたが持っているフローティングdivは、単にラップアラウンドするのではなく、独自のコンテナに入れられます。

bootstrap class rowはこれに最適です：

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

Phpモジュラス演算子を使用して、適切なポイントで各行の開閉をエコーし​​ます。

お役に立てれば。

53
dading84

array_chunk(input array, size of each chunk)関数を使用して、配列を断片に分割できます。
php.netマニュアル：array_chunk

サイズ要素を持つ配列に配列をチャンクします。最後のチャンクには、size未満の要素が含まれる場合があります。

以下に例を示します。

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

最初に変数を定義してから、ループが終了する直前に変数をインクリメントし、終了行タグをエコーし​​て、それに応じて別のタグを開きます。

便利な手順

  • 定義$i = 0;
  • ループ内でエコーを作成します。
  • foreachが終了する直前に$i++をインクリメントし、条件を作成します：$i % 3 == 0の場合、行の終了タグをエコーし​​、新しい行を生成します。

コード：

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

ヒント：行をforeachしたくはありません。悪い考えです。1行にしてアイテムをforeachします。

10
Wael Assaf

このすべての複雑さの必要はありません。 Bootstrapは12 colグリッドシステム内で自動的に動作します。ループしてcolサイズを作成し、12で均等に分割するようにします（例：col-md-4）。

この例では、12/4 = 3なので、行ごとに3が自動的に提供されます。

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

これは、コレクションのchunk（）関数を使用するのに適しています way –.

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

シンプルで簡単なソリューション

    $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
    <div class="row">
<?php
    foreach ($rows as $row){
?> 
     <div class="col-lg-4 col-sm-4 col-6">
     Your content
     </div>
<?php } ?>
    </div>

これにより、各行に3つの列が表示されます。

0
Robert

シンプルなカスタムCSSソリューション... .listingラッパーとbottom-margin、最後の行には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