响应式设计 - 数据库生成的图标/图像

Question

在我正在开发的网站的主页上，我们在屏幕上从数据库中生成了大约 50 个大图标/图像，我目前将它们标出 5 个，然后我放入一个 BR 标签以转到下一行（使用 PHP 和计数器）。我的问题是设计需要响应，所以如果你把屏幕缩小一点，它会在第一行保存 3，然后在下一行保存 2，然后 PHP 生成的 BR 标签开始，所以我们得到一个空间。

解决此问题的最佳方法是什么，无论屏幕大小如何，它每次都能正常工作？我正在使用 Twitter Bootstrap 和 cakephp 进行编码。

了解我的意思的最佳方式是在网站本身：http://www.beanclaim.com/

谢谢

当前的 PHP 代码是：

// LOOPING THROUGH ALL OF THE INDUSTRY ICONS AND BUILDING A LINK FOR THEM
// ---------------------------------------------------------------------------------->
if (isset($industry_icons)) 
{ 
    $i=0;
    foreach ($industry_icons as $industry) 
    { 

        echo $this->Html->link($this->Html->image($industry['Industry']['image_path'],
            array(
                'width' => '180',
                'style' => 'margin-right: 5px; margin-left: 5px; margin-bottom: 10px;')),
            array('controller' => 'users', 'action' => 'register', 'industries' => $industry['Industry']['id']),
            array('escape' => false));


      $i++;
      if($i % 5 == 0)
      {
        echo "<br />"; 
      }
    } 
} 

Answer 1

删除<br/> 标签。你的问题就解决了。图像将根据您的容器 div 大小自动调整。