Question

我想在一个网站上显示一系列徽标，我可以使用自举响应列很好地构建这些徽标。我们的想法是点击每个徽标，通过使用折叠方法向下按下面的行来打开下面的相关描述。它需要在不知道项目数量的情况下工作，并且不需要将布局限制为一行的一定数量的元素。（标记是用php循环编写的）。

我有一些半工作代码，但问题是它会因为bootstrap中的订单类数量而受到限制。而且，它很惹人注目，我觉得它不是一个优雅的解决方案。

<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类编写。另外..你有什么建议为什么这个解决方案是毛躁而不顺畅的？

使用bootstrap行，cols，flex和特定折叠排列的项目

0 个答案: