使用php和bootstrap的动态网格

时间:2019-01-24 13:23:18

标签: php bootstrap-4

我想使用php和bootstrap创建动态网格。 例如

情况1 =>如果我总共有6条记录,则第1行包含col-md-4网格,第2行包含col-md-4网格 情况2 =>如果我总共有5条记录,则第1行包含col-md-4网格,第2行包含col-md-6网格 情况3 =>如果我总共有4条记录,则第1行包含col-md-4网格,第2行包含col-md-12网格

该怎么办,我不知道,没有解决办法?

<?php foreach($Banners as $i=>$DATA){
    if($count%3==1){
        echo "<div class='row'>";
        $lgclass = "col-lg-4";
    }
    if($count%4==0){
        $lgclass = "col-lg-6";
    }
    if($count%5==0){
        $lgclass = "col-lg-6";
    }
?>
<div class="<?php echo $lgclass;?> col-xs-12 col-sm-12" <?php echo $count;?>>
    <h2 class="section-title" >&nbsp;</h2>
    <a href="http://mymegarealty.net/index.php?option=com_jointeam">
        <div class="full-width"> 
            <img src="<?php echo $Imageurl;?>" class="img-responsive" style="height:250px;;display:unset;">
        </div>
    </a>
</div>
<?php 
if($count%3==0){
    echo "</div>";
} 
$count++;} ?>

2 个答案:

答案 0 :(得分:0)

如果您愿意,最好是一个递归解决方案。如果按照我的例子推翻了您的需求,我在一开始就给您写了逻辑。我的逻辑是程序性的。

<?php
/*
logic
while myElements !=0 
    if myElements > 2
        dispay row whith 3 elements
        myElements remove firs 3
    else if myElements == 2
        dispay row whith 2 elements
        myElements remove firs 2
    else if myElements == 1
        dispay row whith 1 elements
        myElements remove firs 1
end while
*/
// init my data
$data=[];
$element=5;
for($i=0;$i<$element;$i++){array_push($data,$i);}
var_dump($data);

// do code

function displayElement($data, $classAdd){
    echo "<div class='".$classAdd."'>";
    echo $data; // your cell
    echo "</div>";
}

while (sizeof($data)!=0){
    if (sizeof($data)>2){
        echo "<div class='row'>";
        displayElement($data[0],"col-lg-4");
        displayElement($data[1],"col-lg-4");
        displayElement($data[2],"col-lg-4");
        echo "</div>";
        $data=array_slice($data,3);
    }elseif (sizeof($data)==2){
        echo "<div class='row'>";
        displayElement($data[0],"col-lg-6");
        displayElement($data[1],"col-lg-6");
        echo "</div>";
        $data= array_slice($data,2);
    }elseif (sizeof($data)==1){
        echo "<div class='row'>";
        displayElement($data[0],"col-lg-12");
        echo "</div>";
        $data= array_slice($data,1);
    }
}

答案 1 :(得分:0)

您应该能够通过flex轻松实现这一目标。但是使用bootstrap尝试使用递归:下面的小例子

RTLD_LOCAL