每3列在引导程序中循环行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每3列在引导程序中循环行相关的知识，希望对你有一定的参考价值。
我希望页面中的每一行都能显示3个缩略图，但它会堆叠成一行。
如何管理循环？谢谢...
<?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列生成一行？
这个截图是我从代码中获得的：
这是我想要得到的：
编辑：最初我从头顶快速发布了这个。感谢Wael Assaf指出我已经使用过的改进。此外，我添加了一些代码更改，现在它是多功能的，可用于通过更改变量$ numOfCols可以选择的可变数量的列
您需要为每行添加一个div。然后你拥有的浮动div，不会只是环绕，而是将在他们自己的容器中。
引导类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模数运算符来回显正确点处每行的打开和关闭。
希望这可以帮助。
您可以使用array_chunk(input array, size of each chunk)函数将数组块化为碎片。
php.net manual: 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>';
}
?>
首先你应该定义一个变量，然后在循环结束之前增加它并回显结束行标记并根据它打开另一个变量。
有用的步骤
- 定义
$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>不需要所有这些复杂性。 Bootstrap自动在12 col网格系统内工作。只要确保你循环并制作col大小，使其均匀分为12，例如COL-MD-4。
由于12/4 = 3，此示例将自动提供每行3个。
<div class="row">
LOOPCODE
{
<div class="col-md-4">
DATA
</div>
}
</div>
这是一个更好的way - 使用集合的chunk（）函数。
`@foreach($items->chunk(5) as $chunk)
<ul>
@foreach($chunk as $item)
Item {{ $loop->iteration }}
@endforeach
</ul>
@endforeach`
简单的自定义css解决方案...使用.listing在bottom-margin包装器中定位行，最后一行没有margin-bottom。
<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;
}
<div class="row">
<?php
foreach ($rows as $row){
?>
<div class="col-lg-4 col-sm-4 col-6">
Your content
</div>
<?php } ?>
</div>
这将在每行中提供三列。
简单易用的解决方案
$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
}
以上是关于每3列在引导程序中循环行的主要内容，如果未能解决你的问题，请参考以下文章