Bootstrap 购物车滑块的 PHP 语法答案

【问题标题】：Php syntax for Bootstrap cart sliderBootstrap 购物车滑块的 PHP 语法
【发布时间】：2016-04-08 09:14:39
【问题描述】：

我正在尝试制作购物车滑块，可以在 http://bootsnipp.com/snippets/Pbnxx 看到我正在努力使用正确的 PHP 语法。谁能帮我吗？

在我看来，我需要为每 4 列添加 .item 和 .row，但是出现了故障并且无法按预期工作

<div class="container">

      <div class="row">
           <div class="col-md-9">
               <h3>TITLE </h3>
           </div>

           <div class="col-md-3">

               <!-- Controls -->
               <div class="controls pull-right hidden-xs">
                   <a class="left fa fa-chevron-left btn btn-success" href="#carousel-example"
                data-slide="prev"></a>
                   <a class="right fa fa-chevron-right btn btn-success" href="#carousel-example"
                data-slide="next"></a>
               </div>

           </div>
      </div>

     <div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">


                <?php  
                while ( $query->have_posts() ) :
                    $query->the_post();

                // make new slide every 4 columns
                if($i % 4 == 0) : ?>
                <div class="item <?php if($a++ == 0) echo 'active'; ?>">
                    <div class="row">
                    <?php endif; ?>


                    <div class="col-sm-3">  
                        <div class="col-item">
                            <?php echo $i; ?>
                        </div>
                    </div> 

                    <!-- end slide every 4 columns -->
                    <?php   if($i++ % 4 == 0) : ?>
                    </div> <!-- row -->
                   </div> <!-- slide -->
                 <?php endif; ?>


        <?php endwhile; ?> 


    </div> <!-- end carousel -->


    </div> <!-- carousel-example -->
    </div> <!-- container -->

【问题讨论】：

标签： php wordpress modulo

【解决方案1】：

我认为您的.row 也应该是.item，因为您想一次滑动 4 个项目。

【讨论】：

Bootsnipp 的代码中的语法相同，并且在两种方式上都没有任何区别，因为 .row 只调整左右边距
在您的代码中只有第一个元素是item 将您的<div class="item" ..> 移到if($i % 4 == 0) 上方

【解决方案2】：

这里有我使用 smarty 的代码。我使用了array_chunk($items, 4) 和嵌套循环。

<div class="carousel-inner">
        {foreach $recipebox.recipes as $key=>$recipeSet}
            {if $key == 0}
                <div class="row item active">
            {else}
                <div class="row item">
            {/if}
                {foreach $recipeSet as $recipe }
                    <div class="col-xs-3">
                        // box content
                    </div>
                {/foreach}
            </div>
        {/foreach}
    </div>

【讨论】：