如何创建这样一个动态结构?HTML+PHP

为了创建您想要的结构：

• 您还需要将<div class="item active">放入foreach循环中，因为为了有许多items，您也希望多次重复。

• 您必须从<div class="item active">中删除active，因为它将被添加到每个的item上，而我们只希望它位于第一个。

• 您必须创建一个检查变量，以便类active仅添加到第一个item中。

您的最终代码应该看起来像：

<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
    <div class="carousel-inner">
        <?php
            $i = 0; /* This is the checking variable */
            $active; /* This is the variable containing the class 'active' */
            foreach ($this->getItems() as $_item):
                $i++; /* We increment the checking variable in each loop */
                $active = ($i === 1) ? "active" : ""; /* We make the check */
        ?>
                <div class="item <?php echo $active;?>">
                    <!-- The rest of your code as it is -->
                </div>
        <?php
            endforeach;
        ?>
    </div>
</div>

[EDIT]：

考虑到您的意见，如果每件商品中需要四种产品，则需要在<div class = "row">中使用另一种loop。

然而，您在代码中做错的关键部分并没有改变，因为您没有循环<div class = "item">，这样您就只有一个。

<div class="item">内部代码的预览：

<div class="item <?php echo $active;?>">
    <div class="row">
        <?php
            for ($i = 0; $i <= 4; ++$i):
        ?>
                <div class="col-sm-3"><!-- The rest of the code --></div>
        <?php
            endfor;
        ?>
    </div>
</div>

试试这个：

<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <div class="row">
            <?php foreach ($this->getItems() as $key=>$_item): // add $key in for loop
                if($key != 0 && $key % 4 == 0) { // just add this code - it will check if 4 records has been displayed re create row div...
                    echo '</div><div class="row">';
                }
            ?>
                <div class="col-sm-3">
                    <a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
                    <div class="product-details">
                        <h3 class="product-name"><a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->escapeHtml($_item->getName()) ?></a></h3>
                        <?php echo $this->getPriceHtml($_item, true) ?>
                        <button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                        <ul class="add-to-links">
                            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                <li><a href="<?php echo $this->getAddToWishlistUrl($_item) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                            <?php endif; ?>
                            <?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
                                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                        </ul>
                    </div>
                </div>
            <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>