PHP循环计数器bootstrap行 [英] php loop counter bootstrap row

查看:178
本文介绍了PHP循环计数器bootstrap行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经在Stack上看到了很多解决方案,但是没有一个适合我,所以我试图根据看到其他人做的事情来编写它。



Im able来计算列和开始新行,但问题是,因为即时通讯在foreach(从数据库获取数据)这样做,它现在将从数据库中的每个条目4次 - >关闭行;开始一个新的行 - >并显示数据库的第二个条目4次 - >关闭行;开始一个新的行 - >并显示数据库的第三个条目4倍,等等...(我的代码是在这篇文章的底部)



所以,现在这个代码显示如下的项目:

  col-md3(item1)| col-md3(item1)| col-md3(item1)| col-md3(item1)
col-md3(item2)| col-md3(item2)| col-md3(item2)| col-md3(item2)
....
....

然而,我想它显示像:

  col-md3(item1) col-md3(item2)| col-md3(item3)| col-md3(item4)
col-md3(item5)| col-md3(item6)| col-md3(item7)| col-md3(item8)
.... | ... | .... | ....
....

我现在的代码:

  foreach($ data as $ row){
echo'< div class =row>'; ($ i = 0; $ i <4; $ i ++){
if($ i%4 == 0& $ i!= 0)
echo $ < / div>< div class =row>';
}
echo'< div class =col-md-3>';
?>
<! - 电子商务用户界面#2 - >
< div class =ecom-ui ecom-ui-two>
< div class =img-container>
<! - 产品图片 - >
< a href =#>< img class =img-responsivesrc =img / product /<?php echo $ row [thumbimage];?> alt =/>< / a>
< / div>
<! - 产品详情 - >
< div class =product-details>
<! - 产品标题 - >
< h4>< a href =#><?php echo $ row [name]; ?>< / A> < span class =color pull-right>€<?php echo $ row [price]; ?>< /跨度>< / H4>
< div class =clearfix>< / div>
< p> Lorem Ipsum只是印刷行业的虚拟文本。< / p>
<! - 价格 - >
< div>
< span class =cart>< a href =#>加入购物车< / a>< / span>
<! - 媒体图标 - >
< span class =p-media pull-right>
< a href =#class =b-tooltipdata-placement =toptitle =49>< i class =fa fa-share-alt red>< ; / I>< / A>
< a href =#class =b-tooltipdata-placement =toptitle =35>< i class =fa fa-thumbs-up red>< ; / I>< / A>
< / span>
< div class =clearfix>< / div>
< / div>
< / div>
< / div>
<! - 电子商务用户界面#2 - >
<?php
echo'< / div>';
}
echo'< / div>< br />';


码。你只需要一个循环,而不是嵌套的。
更改您的代码如下:

 <?php ..... 
... 。
$ i = 0;
echo'< div class =row>';
foreach($ data as $ row){
echo'< div class =col-md-3>';
?>
<! - 电子商务用户界面#2 - >
< div class =ecom-ui ecom-ui-two>
< div class =img-container><! - Product Image - >
< a href =#>< img class =img-responsivesrc =img / product /<?php echo $ row [thumbimage];?> alt =/>< / a>
< / div>
<! - 产品详情 - >< div class =product-details>
<! - 产品标题 - >
< h4>< a href =#><?php echo $ row [name]; ?>< / a>< span class =color pull-right>€<?php echo $ row [price]; ?>< /跨度>< / H4>
< div class =clearfix>< / div>
< p> Lorem Ipsum只是印刷行业的虚拟文本。< / p>
<! - 价格 - >< div>
< span class =cart>< a href =#>加入购物车< / a>< / span>
<! - 媒体图标 - >< span class =p-media pull-right>
< a href =#class =b-tooltipdata-placement =toptitle =49>< i class =fa fa-share-alt red>< ; / I>< / A>
< a href =#class =b-tooltipdata-placement =toptitle =35>< i class =fa fa-thumbs-up red>< ; / I>< / A>
< / span>
< div class =clearfix>< / div>
< / div>
< / div>
< / div>
<! - 电子商务用户界面#2 - >
< / div>
<?php
$ i ++;
if($ i%4 == 0)echo'< / div>< div class =row>';
}?>
< / div>< br />

逻辑:需要遍历 $ data ,当循环执行4次然后中断行(由< / div> )并启动新的< div class =row> )。为了处理在 0 循环之前的计数器 $ i ,并将其增加为 1 在每个循环之后。当 $ i 完全可以被 4 分割时,则echoclosing-row(div) - and-starting-row (div) - 代码,即。 < / div>< div class =row>


Ive seen alot of solutions here on Stack but none seem to work for me, so im trying to write it based upon what im seeing others do.

Im able to count the columns and start the new row, but the problem is, since im doing this in a foreach (getting data from DB) it will now place each entry from DB 4 times->close the row; start a new row->and show the second entry from DB 4 times->close the row; start a new row->and shows the third entry from DB 4 times, and so on... (my code is on the bottom of this post)

So, right now this code displaying items like:

col-md3(item1)  | col-md3(item1)  |  col-md3(item1)  | col-md3(item1)
col-md3(item2)  | col-md3(item2)  |  col-md3(item2)  | col-md3(item2)
....
....

however, i want it to display like:

col-md3(item1)  | col-md3(item2) | col-md3(item3) | col-md3(item4)
col-md3(item5)  | col-md3(item6) | col-md3(item7) | col-md3(item8)
....            |  ...           |  ....          |  ....
....

My code right now :

foreach($data as $row) {
    echo '<div class="row">';
    for ($i=0; $i<4;$i++){
        if ($i%4 == 0 && $i != 0){
            echo '</div><div class="row">';
        }
        echo '<div class="col-md-3">';
        ?>
        <!-- Ecommerce UI #2 -->
            <div class="ecom-ui ecom-ui-two">
                <div class="img-container">
                    <!-- Product Image -->
                    <a href="#"><img class="img-responsive" src="img/product/<?php echo $row[thumbimage]; ?>" alt="" /></a>
                </div>
                <!-- product details -->
                <div class="product-details">
                    <!-- product title -->
                    <h4><a href="#"><?php echo $row[name]; ?></a> <span class="color pull-right">€<?php echo $row[price]; ?></span></h4>
                    <div class="clearfix"></div>
                    <p>Lorem Ipsum is simply dummy text of printing the printing industry.</p>
                    <!-- Price -->
                    <div>
                        <span class="cart"><a href="#">Add to cart</a></span>
                        <!-- Media icon -->
                        <span class="p-media pull-right">
                            <a href="#" class="b-tooltip" data-placement="top" title="21"><i class="fa fa-heart red"></i></a>
                            <a href="#" class="b-tooltip" data-placement="top" title="49"><i class="fa fa-share-alt red"></i></a>
                            <a href="#" class="b-tooltip" data-placement="top" title="35"><i class="fa fa-thumbs-up red"></i></a>
                        </span>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <!-- Ecommerce UI #2 -->
            <?php
         echo'</div>';
     }
     echo '</div><br />';
 }

解决方案

There is logic error in printing code. You need only one loop, not nested. Change your code as below:

<?php .....
....
$i=0;
echo '<div class="row">';
foreach($data as $row) {
    echo '<div class="col-md-3">';
    ?>
    <!-- Ecommerce UI #2 -->
    <div class="ecom-ui ecom-ui-two">
        <div class="img-container"><!-- Product Image -->
            <a href="#"><img class="img-responsive" src="img/product/<?php echo $row[thumbimage]; ?>" alt="" /></a>
        </div>
        <!-- product details --><div class="product-details">
            <!-- product title -->
            <h4><a href="#"><?php echo $row[name]; ?></a><span class="color pull-right">€<?php echo $row[price]; ?></span></h4>
            <div class="clearfix"></div>
            <p>Lorem Ipsum is simply dummy text of printing the printing industry.</p>
            <!-- Price --><div>
                <span class="cart"><a href="#">Add to cart</a></span>
                <!-- Media icon --><span class="p-media pull-right">
                    <a href="#" class="b-tooltip" data-placement="top" title="21"><i class="fa fa-heart red"></i></a>
                    <a href="#" class="b-tooltip" data-placement="top" title="49"><i class="fa fa-share-alt red"></i></a>
                    <a href="#" class="b-tooltip" data-placement="top" title="35"><i class="fa fa-thumbs-up red"></i></a>
                </span>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- Ecommerce UI #2 -->
    </div>
    <?php
    $i++;
    if ($i%4 == 0) echo '</div><div class="row">';
} ?>
</div><br />

Logic: Need to loop through all(each) rows in $data, when loop executed 4 times then break the row(by </div>) and start the new (by <div class="row">). To handle that start the counter $i before loop with 0 and increment it by 1 after each loop. When $i is fully-dividable by 4 then echo "closing-row(div)-and-starting-row(div)-code", ie. </div><div class="row">

这篇关于PHP循环计数器bootstrap行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆