【问题标题】:php loop counter bootstrap rowphp循环计数器引导行
【发布时间】:2015-03-21 12:28:43
【问题描述】:

我在 Stack 上看到了很多解决方案,但似乎没有一个对我有用,所以我试图根据我看到其他人的做法来编写它。

我能够计算列数并开始新行,但问题是,由于我在 foreach 中执行此操作(从 DB 获取数据),它现在将从 DB 中的每个条目放置 4 次->关闭该行;开始一个新行->并显示 DB 中的第二个条目 4 次->关闭该行;开始一个新行->并显示 DB 中的第三个条目 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">';
    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 />';
 }

【问题讨论】:

  • 但是你的while 循环在哪里
  • 没有,对不起,我说的是while循环,当我说foreach时
  • 在循环之前,print_r($data) 是什么样的?
  • 查看下面由 Adarsh Rajput 提供的答案

标签: php twitter-bootstrap foreach dynamic-columns


【解决方案1】:

打印代码存在逻辑错误。你只需要一个循环,而不是嵌套的。 更改您的代码如下:

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

逻辑:需要循环遍历$data中的所有(每)行,当循环执行4次然后打破行(&lt;/div&gt;)并开始新行(&lt;div class="row"&gt; )。要处理该问题,请在循环前使用 0 启动计数器 $i,并在每次循环后将其递增 1。当$i 完全可被4 整除时,回显“closeing-row(div)-and-starting-row(div)-code”,即。 &lt;/div&gt;&lt;div class="row"&gt;

【讨论】:

  • 这几乎是我想要的,但是在第一行,它只会放置 3 列而不是 4 列,第一行之后的行都可以。
  • @defiancenl:我编辑了代码,检查一下。 ** 只需将 row-close-open-logic 放在 END 处即可。**
  • 不,这搞砸了,在第一行的中心留下一列,然后在第二行留下 3,然后就可以了
  • @defiancenl:对不起,我们需要把逻辑往下移,但echo '&lt;div class="col-md-3"&gt;';不行,再往上移,我编辑了代码。
  • 成功了!现在让我弄清楚,你在这里做了什么:D
猜你喜欢
  • 2019-01-09
  • 2014-10-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-21
相关资源
最近更新 更多