Использование строк начальной загрузки, столбцов, изгибов и упорядочивание элементов для конкретной схемы свертывания

Я хотел бы отобразить серию логотипов на создаваемом мной сайте, которые хорошо сочетаются с адаптивными колонками начальной загрузки. Идея состоит в том, что нажатие на каждый из логотипов открывает соответствующее описание ниже, нажимая на строку ниже, используя метод свертывания. Он должен работать, не зная количества элементов и не ограничивая макет заданным количеством элементов в строке. (разметка написана с помощью цикла php).

У меня есть полу-рабочий код, но проблема в том, что он будет ограничен из-за количества классов заказов в начальной загрузке. А также, это нервное, и я чувствую, что это не элегантное решение.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="row mx-5 mt-5 mt-md-5 d-flex flex-row">

<?php
$c = 12/12; $c_sm = 12/12; $c_md =12/ 6; $c_lg = 12/4; $c_xl = 12/3;
for ($i = 1; $i <= 40; $i++) :
$order = ceil( $i / $c );
$order_sm = ceil( $i / $c_sm );
$order_md = ceil( $i / $c_md );
$order_lg = ceil( $i / $c_lg );
$order_xl = ceil( $i / $c_xl );
?>

<div class="col-12 col-md-6 col-lg-4 col-xl-3 order-1 order-md-<?= $order_md ?> order-lg-<?= $order_lg ?> order-xl-<?= $order_xl ?> border p-3">
<button class="btn" type="button" data-toggle="collapse" data-target="#description-<?= $i ?>" aria-expanded="false" aria-controls="logo-<?= $i ?>" >
<p class="text-center font-weight-bold">Logo <?= $i ?></p>
</button>
</div>

<div class="collapse col-12 order-1 order-md-<?= $order_md + 1 ?> order-lg-<?= $order_lg + 1 ?> order-xl-<?= $order_xl + 1 ?> border font-italic p-4" id="description-<?= $i ?>">
<p class="m-0">Description <?= $i ?></p>
</div>

<?php endfor ?>

</div>

У кого-нибудь есть предложения по более элегантному решению? Тот, который является будущим и не ограничен количеством предметов. Желательно тот, который не требует много написания PHP-класса. Кроме того … Есть ли у вас какие-либо предложения, почему это решение не является гладким?

1

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector