引导程序在奇数列上循环行

时间:2018-08-20 10:20:03

标签: php html css twitter-bootstrap-3

我正在使用引导程序,传入的内容是一个XML提要,它会发生变化,因此我的cols数可能是奇数或偶数。我正在使用col-sm-6,并且试图关闭行的奇数行和偶数行。

这是我用来关闭行的代码,但是当内容为奇数时会弄乱,因为行最后没有被关闭。

我还意识到它会执行额外的循环,并且不会打印任何内容,因为它会检查活动和繁忙,因此计数器无法正常工作。

最好的方法是什么?

链接:https://psychicboudoir.com/all-readers/

    <div class="container home-section padding-top">
       <div class="row">
           <div class="col-sm-12">
                <h2>All Readers</h2>
           </div>
       </div>
       <div class="row">
<?php

    $psychiclist = simplexml_load_file('https://www.thecircle.com/newcircle/export/agents.asp?user=PsychicBoud');

    foreach ($psychiclist as $psychicinfo):
        $largeimg=$psychicinfo->largeimg;
        $status=$psychicinfo->status;
        $name=$psychicinfo->name;
        $pin=$psychicinfo->pin;
        $text=$psychicinfo->text;
        $cssclass = strtolower($status);
      //  echo "<script>console.log('$p')</script>";
        if ($status == "available" OR $status == "busy") {
        echo "
        <div class='col-sm-6'>
            <div class='row row-centered'>
                <div class='col-sm-4 col-xs-4'>
                    <img height='100%' width='100%' src='",$largeimg,"'>
                    <p class='status ",$cssclass,"'>",$status,"</p>
                </div>
                <div class='col-sm-8 col-xs-8 text-left'>
                    <p class='name text-left'>",$name,"</p>
                    <p class='pin text-left'>Pin: ",$pin,"</p>
                    <p class='description'>",$text,"</p>
                </div>
            </div>     
        </div> 
        ";}
        $counter++;
                 if ($counter % 2 == 0) {
                 echo '</div><div class="row">';
               }

    endforeach;
?>

</div>

1 个答案:

答案 0 :(得分:0)

    <div>
        <div>
            <?php $numOfCols= 2;  $rowCount= 0;  $bootstrapColWidth= 12/$numOfCols;?>
            <div class="row">
                <?php foreach ($carts as $cart ) : ?> 
                    <div class="col-sm-12 col-lg-<?php echo $bootstrapColWidth; ?>" style="margin-bottom: 25px;">
                        <a href="<?php echo base_url();?>category/parts/<?php echo $cart->id; ?>">
                            <div class="card" style="min-width: 250px;">
                                <img class="card-img-top" style="min-width: 400px; height: 14rem;width: 100%; top: 0;bottom: 0; margin: auto; position: relative;" src="assets/uploads/<?=$cart->image?>" alt="Card image cap" >
                                <div class="card-img-overlay">
                                    <h3 class="card-title">
                                        <a href="<?php echo base_url();?>category/parts/<?php echo $cart->id; ?>"><?= $cart->cart;?></a>
                                    </h3>

                                </div>
                            </div>  
                        </a>
                    </div>

                    <?php
                        $rowCount++;
                        if($rowCount % $numOfCols == 0) 
                            echo '</div><div class="row">';
                    ?>
                <?php endforeach; ?>  
            </div>
        </div>
    </div>
  
    

这是我所能得到的最好的...可能您可以对其进行一些更改以适合您