Question

所以我正在使用Twitter Bootstrap，Wordpress和ACF Fields开发HTML轮播。

此轮播每行显示2个项目。这些项目中的每一项都有一类“col-md-6”。因此，通过每行显示2个项目，总共有2列“col-md-6”（这是完美的，因为这完成了Bootstrap所需的12列）：

这是我的代码：

<?php if (have_rows('columns_carousel_slide')) { 
$count = 0; ?>

<div class="item active"><div class="row">

<?php while(have_rows('columns_carousel_slide')) {
the_row();
if ($count > 0 && (($count % 2) == 0)) {
?>

</div> <!--.item -->
</div> <!--.row -->

<div class="item">
<div class="row">

<?php } ?>

  <div class="col-md-6"> 

        <h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>

  </div> <!--.col-md-6 -->

<?php $count++; } ?>

</div> <!--.item -->
</div> <!--.row -->

<?php } ?>

但是，我想知道是否有办法检测每行是否有1个项目，如果是，则显示“col-md-12”而不是“col-md-6”以填充在没有2件物品的剩余空间内。

欢迎任何想法。

谢谢！

-

编辑：根据Jakub的建议，我已将我的代码更新为以下内容：

<?php if (have_rows('columns_carousel_slide')) { 
$count = 0; ?>

<div class="item active"><div class="row">

<?php 
$multiplier = 1; //that could actually go before the while
if (count(get_field('columns_carousel_slide'))%2 === 1 && 
    $count === count(get_field('columns_carousel_slide'))-1) {
        $multiplier = 2;
} ?>

<?php while(have_rows('columns_carousel_slide')) {
the_row();
if ($count > 0 && (($count % 2) == 0)) {
?>

</div> <!--.item -->
</div> <!--.row -->

<div class="item">
<div class="row">

<?php } ?>

  <div class="col-md-<?php echo (6*$multiplier);?>"> 

        <h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>

  </div> <!--.col-md-6 -->

<?php $count++; } ?>

</div> <!--.item -->
</div> <!--.row -->

<?php } ?>

但是，我想我一定错过了一些东西，因为我的所有行都得到了“col-md-12”。

Answer 1

假设＆＃34; get_field＆＃34;返回包含所有行的数组，然后您需要更改以下内容：

<div class="col-md-6"> 
    <h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->

用这个：

<?php 
$multiplier = 1; //that could actually go before the while
if (count(get_field('columns_carousel_slide'))%2 === 1 && 
    $count === count(get_field('columns_carousel_slide'))-1) {
        $multiplier = 2;
} ?>
<div class="col-md-<?php echo (6*$multiplier);?>">     
    <h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-12 -->

一个简短的解释：

最初我们将乘数设置为1（因此配对时6 * 1 = 6）列）。
我们会检查条件数是否均匀我们正在处理最后一项。如果是这样 - 我们设置了乘数为2（单个列为6 * 2 = 12）
我们将课程设置为＆＃34; col-md - ＆＃34;和我们的计算结果（6或12）

根据元素数量更改列大小

1 个答案: