PHP / HTML仅显示x量的结果，具体取决于视口

Question

我正在使用Bootstrap v3，并且响应式设计在这个例子中也能完美地运行。

我的问题是，当页面被缩放时，它总是会显示5个div（正如我希望它与下面的代码一样），无论它占用了多少行。

$array = array(1,2,3,4,5);
foreach($array as $row)
{
  echo "<div style='display: inline-block;'>";
    // HTML DIV Content here
  echo "</div>";
}

我想做什么，我无法弄清楚如何计算1或2行中适合多少div。如果5可以放在1行中，则将5显示为1行。如果4可以放入1行，则显示8为2行。如果3可以放在1行中，那么将6显示为2行。

所以我的数组可能包含可显示的最大值（本例中为8）。

我不确定bootstrap是否可以开箱即用，或者PHP是否具有此功能。或者，如果我将不得不使用jQuery来实现这一目标。

当前行为：

预期行为：

Answer 1

<table class='table table-responsive           

'>
<tr>
<?php

$array = array(1,2,3,4,5);
foreach($array as $row)
{
  echo "<td>";
// content here
  echo "</td>";
}
?>
</tr>
</table>

使用表格响应而不是div类，它将在一行上呈现。

对于我手机上格式不佳或错误的抱歉，这绝不是最好的体验。

或者，如果你想通过div的大小来控制它会变得更难。例如，您可以通过回显bootstrap div类I.e col-md-3在每一行中获得相同的数字。如果你想知道它的宽度，你的身体宽度是已知浮标可能有效。