Question

我试图用bootstrap复制这个结构：

 <div class="col-sm-3 right-border">
            <div class="hidden-md hidden-lg">&nbsp;</div>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
        </div>
        <div class="col-sm-3 right-border">
            <div class="hidden-md hidden-lg">&nbsp;</div>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
        </div>
        <div class="col-sm-3 right-border">
            <div class="hidden-md hidden-lg">&nbsp;</div>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
        </div>
        <div class="col-sm-3 right-border">
            <div class="hidden-md hidden-lg">&nbsp;</div>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">Item</a>
        </div>

使用此代码：

 <?php
            $count = 0;
            $maxColumns = 4;

            $myArray = @['Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item'];


            foreach($myArray as $item) {
                echo "<div class='col-sm-3 right-border'>";
                echo "<a href=\"#\" class=\"btn btn-primary btn-lg btn-block\" role=\"button\">";
                echo 'Item';
                echo '</div>';
                echo '</div>';
                $i++;
                if ($i % $maxColumns == 0) {echo '</div><div class="hidden-md hidden-lg">&nbsp;</div>';}
            }

        ?>

我也试过使用for循环，但它总是吐出垃圾。

大多数教程都建议使用一行，输出4列然后开始一个新行。当然有输出1列有四个项目。

使用行然后添加4个项目并不会给出视觉效果。

Answer 1

我认为你最好的选择是将数组拆分为子数组。我从http://php.net/manual/en/function.array-chunk.php

抓取了partition函数

<?php

    function partition( $list, $p ) {
        $listlen = count( $list );
        $partlen = floor( $listlen / $p );
        $partrem = $listlen % $p;
        $partition = array();
        $mark = 0;
        for ($px = 0; $px < $p; $px++) {
            $incr = ($px < $partrem) ? $partlen + 1 : $partlen;
            $partition[$px] = array_slice( $list, $mark, $incr );
            $mark += $incr;
        }
        return $partition;
    }

    $maxColumns = 4;

    $myArray = @['A','B','C','D','E','F','G','H','I','J','K','L','M','N'];
    $cols = partition($myArray, $maxColumns);


    foreach($cols as $col) {
        echo "<div class='col-sm-3 right-border'>";
        echo "<div class='hidden-md-lg'>&nbsp;</div>";

        foreach($col as $item) {
            echo "<a href='#' class='btn btn-primary btn-lg btn-block' role='button'>$item</a>";
        }

        echo '</div>';
    }

?>

使用bootstrap

1 个答案: