Question

我正在用PHP创建一个项目，使用Facebook SDK从Facebook页面中提取图片。我使用循环来回显40个不同的图像，我想在4个不同的bootstrap列之间均匀分布这些图像，如下所示。

Column1     Column2     Column3     Column4
Image1      Image2      Image3      Image4
Image5      Image6      Image7      Image8

我目前用于将图像回显到一列的循环：

  foreach($rData as $post) {
   $image = ('<center><img class="img-responsive" src="'.$post->getProperty('full_picture').'"/>'.'</br></center>');
   print('<div class="col-sm-12">'.$image.'</div'); 
  }

我花了很长时间试图解决这个问题，但似乎永远不会分发数据而不重复。任何帮助将不胜感激，提前谢谢。

Answer 1

更改：

print('<div class="col-sm-12">'.$image.'</div');

要：

print('<div class="col-sm-3">'.$image.'</div');

Bootstrap使用12列网格。如果你告诉每个元素只占用其中3列，那么你将在更大的屏幕上得到4个。

另请参阅this answer，以帮助您确定在达到断点之前要保留这4列的屏幕尺寸。

Answer 2

您可以检查行中最后一个元素（4）的时间，并将某些内容（html元素）放到下一行：

$i = 0;

foreach($rData as $post) {
    $myDivisor = '' //nothing yet

    if( ($i%4) == 0 )
        $myDivisor = 'something...';

    $image = ('<center><img class="img-responsive" src="'.$post->getProperty('full_picture').'"/>'.'</br></center>');

    print('<div class="col-sm-12">'.$image.'</div>'.$myDivisor);

    $i++;

...

Answer 3

使用array_chunk：

foreach(array_chunk($rData, 4) as $chunk)
{
    print('<div class="row">');
    foreach($chunk as $post) {
       $image = ('<center><img class="img-responsive" src="'.$post->getProperty('full_picture').'"/>'.'</br></center>');
       print('<div class="col-sm-3">'.$image.'</div>'); 
    }
    print('</div>');
}

如何在php中将数据均匀分布到4列？

3 个答案: