php 每 3 列在 bootstrap 中循环一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40561301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loop row in bootstrap every 3 columns
提问by Mochamad Ramdanny Lukman
I want every row in my page to display 3 thumbnails, but its stacked in one row.
我希望页面中的每一行都显示 3 个缩略图，但它堆叠在一行中。
How do I manage the looping? Thank you...
我如何管理循环？谢谢...
<?php
foreach ($rows as $row){
?>
<div class="col-md-3">
<div class="thumbnail">
<img src="user_file/<?php echo $row->foto; ?>">
</div>
</div>
<?php
}
?>
This code generates stacked thumbnails in a row. How can I generate the row for every 3 columns?
此代码生成一行中的堆叠缩略图。如何为每 3 列生成一行？
This screenshot is what I got from the code:
这个截图是我从代码中得到的：
This is what I'm looking to get:
这就是我想要得到的：
回答by dading84
Edit: Originally I posted this quickly from the top of my head. Thanks, Wael Assaf for pointing out an improvement, which I have used. Also, I have added a couple of changes to the code, now it is versatile and can be used for a variable number of columns you can choose by changing the variable $numOfCols
编辑：最初我从头顶快速发布了这个。谢谢，Wael Assaf 指出了我使用过的改进。此外，我对代码添加了一些更改，现在它是通用的，可以用于可变数量的列，您可以通过更改变量 $numOfCols 来选择
You need to add a div for each row. Then the floating divs you have, will not just wrap around but instead will be in their own container.
您需要为每一行添加一个 div。然后，您拥有的浮动 div 不仅会环绕，而且会在它们自己的容器中。
The bootstrap class rowis perfect for this:
bootstrap 类row非常适合这个：
Method 1 (not recommended for new versions of HTML and Browser):This method is for older version on HTML and browser because new versions of HTML and browser have inbuild functions to auto close missing tags so when you use code below it will automatically close pre-defined tag <div class="row">rather than waiting for ifcondition to close that tag in result causing improper layout.
方法 1（不推荐用于新版本的 HTML 和浏览器）：此方法适用于 HTML 和浏览器上的旧版本，因为新版本的 HTML 和浏览器具有自动关闭缺失标签的内置功能，因此当您使用下面的代码时，它会自动关闭预-定义的标签，<div class="row">而不是等待if条件关闭该标签，从而导致布局不当。
Note:you can try and observe result by inspecting elements
注意：您可以通过检查元素来尝试观察结果
<?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>
Uses PHP modulus operator to echo the open and close of each row at the right points.
使用 PHP 模数运算符在正确的点回显每行的打开和关闭。
Method 2 (recommended):This method is to overcome the problem faced by method 1, as a result, causing proper layout for modern browser.
方法二（推荐）：该方法是为了克服方法一所面临的问题，从而导致现代浏览器的正确布局。
<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 4;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
foreach ($rows as $row){
if($rowCount % $numOfCols == 0) { ?> <div class="row"> <?php }
$rowCount++; ?>
<div class="col-md-<?php echo $bootstrapColWidth; ?>">
<div class="thumbnail">
<img src="user_file/<?php echo $row->foto; ?>">
</div>
</div>
<?php
if($rowCount % $numOfCols == 0) { ?> </div> <?php } } ?>
Note:you can try and observe result by inspecting elements
注意：您可以通过检查元素来尝试观察结果
Hope this helps.
希望这可以帮助。
回答by Pars
You can use array_chunk(input array, size of each chunk)function to chunk your array into pieces.
php.net manual: array_chunk
您可以使用array_chunk(input array, size of each chunk)函数将数组分块。
php.net 手册：array_chunk
Chunks an array into arrays with size elements. The last chunk may contain less than size elements.
将数组分块为具有大小元素的数组。最后一个块可能包含小于 size 的元素。
Here is an example:
下面是一个例子：
<?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>';
}
?>
回答by Chris Go
No need for all this complexity. Bootstrap works within a 12 col grid system automatically. Just make sure you loop and make col size so that that evenly divides by 12 e.g. col-md-4.
不需要所有这些复杂性。Bootstrap 自动在 12 列网格系统中工作。只需确保循环并设置 col 大小，以便将其平均除以 12，例如 col-md-4。
This example will provide 3 per row automatically since 12 / 4 = 3.
由于 12 / 4 = 3，此示例将自动提供每行 3 个。
<div class="row">
LOOPCODE
{
<div class="col-md-4">
DATA
</div>
}
</div>
回答by Wael Assaf
First You should define a variable, then right before the loop ends increment it and echo the closing row tag and open another one depending on it.
首先你应该定义一个变量，然后在循环结束之前增加它并回显结束行标签并根据它打开另一个标签。
Useful steps
有用的步骤
- define
$i = 0; - inside the loop make your echos.
- right before the foreach ends increment the
$i++and make a condition : if$i % 3 == 0then echo the closing tag of the row then generate a new row.
- 定义
$i = 0; - 在循环内使你的回声。
- 就在 foreach 结束之前递增
$i++并创建一个条件：如果$i % 3 == 0然后回显该行的结束标记，则生成一个新行。
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>Tip : You don't really want to foreach the row, its a bad idea, make one row and foreach the items.
提示：你真的不想 foreach 行，这是一个坏主意，做一行并 foreach 项目。
回答by Ignacio Aguirre
dading84's answerworks fine, but i have modified it for avoid adding a last empty row. The change was simply count the number of elements in the array, then check if the last element was reached, to prevent adding new div with class row.
dading84 的回答工作正常，但我修改了它以避免添加最后一个空行。更改只是简单地计算数组中元素的数量，然后检查是否到达最后一个元素，以防止添加具有类行的新 div。
Code edited:
代码编辑：
<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 4;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
$arrayCount = count($rows);
?>
<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 && $rowCount < $arrayCount) {
echo '</div><div class="row">';
}
}
?>
</div>
Resume:
恢复：
- Added variable $arrayCount
- Add conditional inside the IF modulus to check if is the last row, so avoid adding new div.
- 添加变量 $arrayCount
- 在 IF 模数中添加条件以检查是否是最后一行，因此避免添加新的 div。
回答by Aosu Terver
回答by ajmedway
Simple custom css solution... target rows in .listingwrapper with bottom-margin, last row has no margin-bottom.
简单的自定义 css 解决方案....listing包装器中的目标行带有bottom-margin，最后一行没有margin-bottom。
HTML
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
CSS
.listing .row {
margin-bottom: 20px;
}
.listing .row:last-child {
margin-bottom: 0;
}
回答by Robert
<div class="row">
<?php
foreach ($rows as $row){
?>
<div class="col-lg-4 col-sm-4 col-6">
Your content
</div>
<?php } ?>
</div>
This will give three columns in each row.
这将在每行中给出三列。
回答by Jatin Kumar
Simple And Easy Solution
简单易行的解决方案
$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
}
回答by faye.babacar78
Doing it with bootstrap in a twig file:
在树枝文件中使用引导程序执行此操作：
<div class="row">
{% for item in items %}
<div class="col-md-6 clearfix"></div>
{% endfor %}
</div>
