Я хотел бы отобразить серию логотипов на создаваемом мной сайте, которые хорошо сочетаются с адаптивными колонками начальной загрузки. Идея состоит в том, что нажатие на каждый из логотипов открывает соответствующее описание ниже, нажимая на строку ниже, используя метод свертывания. Он должен работать, не зная количества элементов и не ограничивая макет заданным количеством элементов в строке. (разметка написана с помощью цикла 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-класса. Кроме того … Есть ли у вас какие-либо предложения, почему это решение не является гладким?
Задача ещё не решена.
Других решений пока нет …