使用 PHP 生成 Bootstrap 列

Question

我正在尝试使用高级自定义字段为 Wordpress 主题制作一些 bootstrap 布局。我现在已经设置好了，所以如果你有 2 个内容字段，它会生成一个“6”宽的列。如果您有 3 个字段，它会生成一个“4”字段列。

<?php if(get_field('link_tiles')) : 

while (has_sub_field('link_tiles')) :

$number_of_cols = count(get_field( 'link_tiles' ));

if ($number_of_cols == 2) {
         echo '<div class="col-md-6" style="padding: 0; margin: 0;">';
       }
       elseif ($number_of_cols >= 3) {
         echo '<div class="col-md-4" style="padding: 0; margin: 0;">';
       }
?>

我现在真正想要的是，如果您输入了 4 个字段，它会生成 3x“4”宽的列，然后是 1x“6”宽的列，然后如果您输入了 6 个字段，它会返回生成“4”宽的列。我想使用 While 循环需要一些逻辑，但我不太明白它的逻辑。我是 PHP 的新手，我们将不胜感激！

Answer 1

如果没有看到周围的代码就很难说，但您一定已经在遍历列（为每个列回显 <div>）。你在遍历数组吗？当前索引是否已经设置了变量？

如果是这样，逻辑可能是这样的，给定 $index 等于当前列号：

// set default for two columns
$col_class = 'col-md-6';

if ($number_of_cols == 3) {
  $col_class = 'col-md-4';
} elseif ($number_of_cols == 4 && $index < 4) {
  $col_class = 'col-md-4';
} elseif ($number_of_cols == 4 && $index == 4) {
  $col_class = 'col-md-6';
}

echo '<div class="' . $col_class . '">';

虽然看起来如果你有 4 列，你真的想要 4 列 .col-md-3 而不是 3 列 .col-md-4 和一列 .col-md-6 就像你上面指定的那样（哪个总共有 18 列；Bootstrap 行最多 12 列）。

更新：

这是一段伪代码，但希望能为您提供有关如何继续的想法。请注意，显然您仍然需要为每一列输出内容。

<?php if(get_field('link_tiles')) :

    $number_of_cols = count(get_field( 'link_tiles' ));
    $counter = 1;

    while (has_sub_field('link_tiles')) : 
        // set default for two columns
        $col_class = 'col-md-6';

        if ($number_of_cols == 3) {
          $col_class = 'col-md-4';
        } elseif ($number_of_cols == 4 && $counter < 4) {
          $col_class = 'col-md-4';
        } elseif ($number_of_cols == 4 && $counter == 4) {
          $col_class = 'col-md-6';
        }

        echo '<div class="' . $col_class . '"></div>';

        // increment the counter for the next column
        $counter++;

    endwhile;

endif; ?>

使用 PHP 生成 Bootstrap 列

Generating Bootstrap Columns with PHP

php

wordpress

twitter-bootstrap

advanced-custom-fields