使用PHP循环向元素添加引导行和正确的列号
我尝试使用PHP循环和Twitter引导的12列网格系统创建以下前端: HTML输出为:使用PHP循环向元素添加引导行和正确的列号,php,html,wordpress,loops,twitter-bootstrap-3,Php,Html,Wordpress,Loops,Twitter Bootstrap 3,我尝试使用PHP循环和Twitter引导的12列网格系统创建以下前端: HTML输出为: <div class="row"> <div class="col-lg-4"> Content... </div> <div class="col-lg-4"> Content... </div> <div class="col-lg-4"> C
<div class="row">
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
</div>
<div class="row">
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
</div>
<div class="row">
<div class="col-lg-6">
Content...
</div>
<div class="col-lg-6">
Content...
</div>
</div>
问题是: 我不知道如何将适当的列号添加到最后一行的项目中,以便它们填充12列网格 例如,在我的上图中,最后一行中的每个项目都有
col-6
(展开6列)填充了12个网格系统。另一个例子是,如果最后一行中有1个项目,那么它应该有col-12
注意:如图和PHP所示,每行最多有3项
我知道以下几点:
- 项目总数
$loop->post\u count
- 项目编号
$i
- 最后一行的剩余项目数
(我想)$loop->post_count%3
- 总列数
(12可以除以剩余项的数量,计算出要给出的列数)12
如何使用上面PHP中的数据来更改最后一行中项目的列号,以便它们填充12个网格(使它们居中)?为什么不计算模
$two = false;
if($i%3 == 2)
{
<div class="col-md-6">
Content...
</div>
$two = true;
}
if($i%3 == 1)
{
if($two)
{
<div class="col-md-6">
Content...
</div>
}
else
{
<div class="col-md-12">
Content...
</div>
}
}
$two=false;
如果($i%3==2)
{
内容。。。
$2=正确;
}
如果($i%3==1)
{
如果有的话(两美元)
{
内容。。。
}
其他的
{
内容。。。
}
}
一次打印一行,根据行的填充程度确定每个元素的html类;对于0列md-4,对于1列md-12。。。您需要一些辅助结构。最后,如果缓冲区中有内容,则打印最后一行
/**
* Prints the row in a grid
* @param array $posts
* @param string $class
*/
function printRow($posts, $class) {
echo '<div class="row">';
foreach ($posts as $post) {
echo '<div class="' . $class . '">' . $post . '</div>';
}
echo '</div>';
}
$i = 0;
$htmlClasses = ['col-md-4', 'col-md-12', 'col-md-6']; //helper for setting html classes
$buffer = []; //helper array to hold row elements
while (have_posts()) {
the_post();
$i++;
$mod = $i % 3;
//determine html class
$htmlClass = $htmlClasses[$mod];
if ($mod > 0) {
$buffer[] = $currentPost; //this is the post content
} else {
printRow($buffer, $htmlClass);
$buffer = [];
}
}
//printing final row if there are elements
if (!empty($buffer)) {
printRow($buffer, $htmlClass);
}
/**
*在网格中打印行
*@param数组$posts
*@param string$class
*/
函数printRow($posts,$class){
回声';
foreach($posts作为$post){
回显“.$post.”;
}
回声';
}
$i=0;
$htmlClasses=['col-md-4','col-md-12','col-md-6']//用于设置html类的帮助程序
$buffer=[]//用于保存行元素的辅助数组
while(have_posts()){
_post();
$i++;
$mod=$i%3;
//确定html类
$htmlClass=$htmlClasses[$mod];
如果($mod>0){
$buffer[]=$currentPost;//这是帖子内容
}否则{
printRow($buffer,$htmlClass);
$buffer=[];
}
}
//如果有元素,则打印最后一行
如果(!空($buffer)){
printRow($buffer,$htmlClass);
}
我想我找到了解决方案,首先找到最后一行从哪个项目开始,然后对该行中的所有项目应用适当的列号:
<?php
$max_columns = 3; //columns will arrange to any number (as long as it is evenly divisible by 12)
$column = 12/$max_columns; //column number
$total_items = $loop->post_count;
$remainder = $loop->post_count%$max_columns; //how many items are in the last row
$first_row_item = ($total_items - $remainder); //first item in the last row
?>
<?php $i=0; // counter ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ($i%$max_columns==0) { // if counter is multiple of 3 ?>
<div class="row">
<?php } ?>
<?php if ($i >= $first_row_item) { //if in last row ?>
<div class="col-md-<?php echo 12/$remainder; ?>">
<?php } else { ?>
<div class="col-md-<?php echo $column; ?>">
<?php } ?>
Content...
</div>
<?php $i++; ?>
<?php if($i%$max_columns==0) { // if counter is multiple of 3 ?>
</div>
<?php } ?>
<?php endwhile; ?>
<?php if($i%$max_columns!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>
我喜欢你的问题,因为我正在处理一个非常类似的情况。由于其他答案有点长,我决定把我的留在这里供大家考虑。对我来说,使用的变量越少,解决方案就越好
BootstrapContentArranger.php
3项,输出:
内容
内容
内容
每次需要执行此操作时,我只需使用array\u chunk
为我的行和列构建适当的数组块
例如,您有:
$posts=[['id'=>1],'id'=>2]…]
不要循环和计算是否添加行,而是将帖子分成若干块:
$posts = [['id' => 1], ['id' => 2] ...]
$postChunks = array_chunk($posts, 4); // 4 is used to have 4 items in a row
foreach ($postChunks as $posts) {
<div class="row">
foreach ($posts as $post) {
<div class="col-md-3">
<?=$post['id'];?>
</div>
}
</div>
}
$posts=[['id'=>1],'id'=>2]…]
$postChunks=array_chunk($posts,4);//4用于在一行中包含4项
foreach($postChunks作为$posts){
foreach($posts作为$post){
}
}
//在这里你想做什么就做什么
最后一行是否总是6-6,或者可以是3-3-3-3,或4-4-4,甚至是2-10,3-9,12@AlanMachado每行至少有3个项目most@AlanMachado它们可以是4-4-4或6-6或12。它们必须相等,因此,例如2-10将不是case@AlanMachado因为在PHP中,我在行
中每3个项目包装一次,所以不会剩下8个项目。因此,每行最多3个项目。“最后一行的每个项目都有col-6(展开6列),使其在12个网格系统中居中”-不是真的,因为6+6是12,它们将占据整行。您的示例图像与您的代码不匹配–要实现这一点,您需要使用4
和offset
两列,第一列使用2
。谢谢,这与我的解决方案类似。你是对的,变量越少越好。嗨@dpitkevics,你能帮我解决这个问题吗
<?php
function BootstrapContentArrange($i) {
$items = $i; // qnt of items
$rows = ceil($items/3); // rows to fill
$lr = $items%3; // last row items
$lrc = $lr; // counter to last row
while ($items > 0) { // while still have items
$cell = 0;
if ($rows > 1) { // if not last row...
echo '<div class="row">'.PHP_EOL;
while ($cell < 3) { // iterate with 3x4 cols
echo '<div class="col-md-4">Content</div>'.PHP_EOL;
$cell++;
}
echo "</div>".PHP_EOL;
$rows--; // end a row
} elseif ($rows == 1 && $lr > 0) { // if last row and still has items
echo '<div class="row">'.PHP_EOL;
while ($lrc > 0) { // iterate over qnt of remaining items
$lr == 2 ? // is it two?
print('<div class="col-md-6">Content</div>'.PHP_EOL) : // makes 2x6 row
print('<div class="col-md-12">Content</div>'.PHP_EOL); // makes 1x12 row
$lrc--;
}
echo "</div>".PHP_EOL;
break;
} else { // if round qnt of items (exact multiple of 3)
echo '<div class="row">'.PHP_EOL;
while ($cell < 3) { // iterate as usual
echo '<div class="col-md-4">Content</div>'.PHP_EOL;
$cell++;
}
echo "</div>".PHP_EOL;
break;
}
$items--; // decrement items until it's over or it breaks
}
}
BootstrapContentArrange(3);
BootstrapContentArrange(11);
BootstrapContentArrange(1);
$posts = [['id' => 1], ['id' => 2] ...]
$postChunks = array_chunk($posts, 4); // 4 is used to have 4 items in a row
foreach ($postChunks as $posts) {
<div class="row">
foreach ($posts as $post) {
<div class="col-md-3">
<?=$post['id'];?>
</div>
}
</div>
}
<?php
//total products or items you have
$total_pr = count($products);
//grid of columns you want
$grid = 3;
$tol_raw = ceil($total_pr / $grid);
$count =0;
?>
<?php for($i=0;$i<$tol_raw;$i++): ?>
<?php
$repeat = $grid;
if($total_pr<$grid)$repeat = $total_pr;
$total_pr -= $repeat;
?>
<div class="row">
<?php for($pr=0;$pr<$repeat;$pr++):?>
<?php $product = $products[$count]; ?>
<!-- column selection is based onn your grid -->
<div class="col-md-4">
//do whatever you want to do here
</div>
<?php $count++; ?>
<?php endfor; ?>
</div>
<?php endfor; ?>