Bootstrap -以垂直和字母顺序在多行中显示数据库中的类别

Question

我得到了一个类别列表，这个列表因页面而异。一页可能只有2页，另一页可能有15页或20页。

现在，我像这样显示它们：

<div class="row">

<div class="col-xs-4">Airbags</div>
<div class="col-xs-4">Beanbags</div>
<div class="col-xs-4">Cats</div>

<div class="col-xs-4">Dogs</div>
<div class="col-xs-4">Eagles</div>
<div class="col-xs-4">Frogs</div>

<div class="col-xs-4">Hair Clips</div>
<div class="col-xs-4">Jamaica</div>
<div class="col-xs-4">Microphones</div>

</div>

它有点难读，尽管在...since中会显示如下：

Airbags       Beanbags   Cats
Dogs          Eagles     Frogs
Hair Clips    Jamaica    Microphones

我想要做的是向他们显示vertically sorted，这样就像：

Airbags    Dogs     Hair Clips
Beanbags   Eagles   Jamaica
Cats       Frogs    Microphones

我现在打印数据的方式是这样的：

$output .= '<div class="row">';

array_multisort($names_array, SORT_ASC, $cat_array);

foreach ((array) $cat_array as $row) {
   $output .= '<div class="col-xs-3">
               <a href="' . $row['subcat_link'] . '" class="">' . 
               $row['name'] . '</a></div>';
}

$output .= '</div>';

有没有什么我不知道的简单方法来实现我想要的订单？然而，只有当有4个或更多的类别时，我认为...because，否则就不可能用列将它们放在一起。

Answer 1

我会考虑使用array_chunk -您将数组拆分为3个数组，然后显示每个数组中的$i项目：

$cat_array = array_chunk((array)$cat_array, 3);
foreach($cat_array as $column) {
    $output .= '<div class="col-xs-3">';
    foreach ($column as $row) {
       $output .= '<div class="row"><div class="col-xs-12"><a href="' . 
                  $row['subcat_link'] . '" class="">' . $row['name'] . '</a></div></div>';
    }
    $output .= '</div>';
}

Answer 2

我是如何在bootstrap 4.5和我使用laravel 7php框架时做到这一点的

<div class="row">
     @foreach ($sortedServices->chunk(ceil(count($sortedServices) / 3)) as $chunkService)
          <div class="col-sm-4 text-left">
               @foreach ($chunkService as $service)
                    <div class="row col">
                         <a href="#">{{ ucwords($service->name) }}</a>
                    </div>
               @endforeach
          </div>
     @endforeach
 </div>

$sortedServices变量是按字母排序的列表