如何在php循环中创建bootstrap html结构?

时间:2015-06-16 17:10:06

标签: php html twitter-bootstrap loops

我使用bootstrap并需要创建像这样的结构

    <div class="row">
        <div class="col-sm-3">
            <!--content loop 1-->
        </div>
        <div class="col-sm-3">
            <!--content loop 1-->
        </div>
        <div class="col-sm-3">
            <!--content loop 2-->
        </div>
        <div class="col-sm-3">
            <!--content loop 2-->
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3">
            <!--content loop 3-->
        </div>
        <div class="col-sm-3">
            <!--content loop 3-->
        </div>
        <div class="col-sm-3">
            <!--content loop 4-->
        </div>
        <div class="col-sm-3">
            <!--content loop 4-->
        </div>
    </div>

我需要在一个foreach循环中创建它,但在每个循环中我只创建这个结构。

    <div class="col-sm-3">
        <!--content loop 1-->
    </div>
    <div class="col-sm-3">
        <!--content loop 1-->
    </div>

我可以在循环之外创建第一个<div class="row"></div>但是如何突破循环以创建第二个<div class="row"></div>并继续循环

3 个答案:

答案 0 :(得分:4)

你可以做这样的事情。您可以根据需要进行修改。 我刚才提到了逻辑

   <div class="row">
     <?php
         $i = 0;
         foreach(....../*your code*/){
           if($i == 4){
               $i = 0;
              ?>
                  </div><div class="row">
                <?php
            } 
                ?>
            <div class="col-sm-3">
               <!--content-->
            </div>
          <?php
            $i++;
         }
        ?>
        </div>

答案 1 :(得分:1)

这就像遵循这个逻辑一样简单:

<a-directive></a-directive>

答案 2 :(得分:0)

我喜欢这样做,因为我认为更清洁,更容易管理:

<?php
    $colsOffset = 4;
    $items = array('content1','content2','content3','etc...');
    $i = 0;
?>
<?php foreach ( $items as $item ) { ?>
    <?php echo ($i % $colsOffset == 0 || $i == 0) ? '<div class="row">' : '' ?>
    <div class="col-sm-3">
       <!--content loop-->
    </div>
    <?php echo (($i + 1) % $colsOffset == 0 || ($i + 1) == count($items)) ? '</div>' : '' ?>
    <?php $i++; ?>
<?php } ?>
相关问题