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>

它有点难以阅读，但是......因为它会显示为：

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个或更多类别时，我认为......因为否则就不可能将它们列在彼此之下。

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 7 php 框架

<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 变量是按字母顺序排列的列表

Bootstrap - 垂直显示数据库中的类别＆amp;按行按字母顺序排序

2 个答案: