WordPress 循环动态关闭 Bootstrap 行

Question

我是 PHP 的新手，但我曾经构建过一些相当简单的 WordPress 主题。我正在尝试制作一些独特的东西，但我不确定如何完成它（或者是否有可能）。

我的目标是创建一个循环，当它达到 bootstrap 的“12”列计数时将动态关闭行（IE：col-md-3 + col-md-3 + col-md -6 = 12）。我最终想要实现的外观以及我目前如何设置我的静态文件 => https://jsfiddle.net/y2mLr3hd/7/embedded/result/。我现在只使用 "display: flex;" 来展示我想要实现的目标。我希望它只是行而不是单行。

我习惯了使用 UL 和 LI 的 WordPress 标准循环，但我不知道如何去做我想做的事情。我希望循环为由列大小“3、4、6、8”组成的列大小计算一个随机数，并创建列大小等于“12”的行，如我之前所述。那个或找到一种方法来让它与我目前设置的方式一起工作。

这是最接近我要找的东西，但实际上还差得远 =>。这是 link 中的代码以供快速参考：

$i=0;
    foreach ($posts as $post):
        if ($i%2==0) echo '<div class="row-fluid">';
        echo '<div class="span6">'. $post->content .'</div>';
        if ($i%2==1) echo '</div>';
    $i++;
endforeach;

如果能帮助我解决这个问题，我将不胜感激！

Answer 1

您的问题分为两部分：

如何使用 3、4、6 和 8 将 12 分成随机部分
给定一个加起来为 12 的数字数组，如何生成包含帖子的行？

第一题比较数学题。请注意，您只能组合 3 和 6，或 4 和 8。你不能将 3 和 4 结合起来，仍然得到 12。

考虑到这一点，我们将设计一个简单的算法：

function getRandomNumbers()
{
    // We start with an empty array and add numbers until we hit 12.
    $result = array();

    // We choose either 3 or 4 as basic number.
    $x = mt_rand(3, 4);

    // Now, as long as we don't hit 12, we iterate through a loop, 
    // adding either the basic number, or 2 times the basic number:
    while (array_sum($result) < 12) {

        // Randomly decide 
        if (mt_rand(0, 1) > 0) {
            $newElement = 2 * $x; // This is either 6 or 8

            // However, always make sure not to exceed 12: 
            if (array_sum($result) + $newElement > 12) {
                $newElement = $x;
            }

        } else {
            $newElement = $x; // This is either 3 or 4
        }

        // Add the new number to the array:
        $result[] = $newElement;
    }

    // Return the resulting array
    return $result; 
}

现在我们需要使用这些数组来创建行。我们首先使用我们编写的函数生成一个包含随机数的数组。

我们将简单地遍历帖子，使用数组中的数字，直到剩下 none。每当我们需要一个新数组时，我们都会生成一个包含随机数的新数组。因为这意味着我们已经添加了 12 个宽度值的列，这也是我们需要开始新行的地方。

// Get the initial array with random numbers
$randomArray = getRandomNumbers();

// Open the initial row.
echo '<div>'; 

foreach ($posts as $post):

    if (count($randomArray) < 1) {
        // Close the row and start a new one: 
        echo '</div><div>';
        // Get a fresh array with random numbers:
        $randomArray = getRandomNumbers();
    }

    $nextRandomNumber = array_pop($randomArray); // This takes the next number.
    echo '<div class="col-md-' . $nextRandomNumber . '">'. $post->content .'</div>';

endforeach;

echo '</div>'; // Close the final row.

WordPress 循环动态关闭 Bootstrap 行

WordPress Loop to dynamically close Bootstrap rows

php

wordpress

grid

dynamic

twitter-bootstrap