Ändern Sie die Spaltengröße basierend auf der Anzahl der Elemente

Question

Also arbeite ich an einem HTML-Karussell mit Twitter Bootstrap, Wordpress und ACF Fields.

Dieses Karussell zeigt 2 Elemente pro Zeile. Jedes dieser Elemente hat eine Klasse von "col-md-6". So nach 2 zeigt Elemente pro Zeile beträgt die Gesamt 2 Spalten von "col-md-6" (was perfekt ist, da dies die von Bootstrap benötigt 12 Spalten ergänzt):

Hier mein Code:

<?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 } ?> 

Ich würde jedoch gerne wissen, ob es eine Möglichkeit gibt zu erkennen, ob es 1 Stück pro Zeile gibt und wenn ja, dann zeigen Sie eine "Col-MD-12" statt einer "Col-MD-6", um zu füllen der verbleibende Platz von 2 Gegenständen.

Alle Ideen sind willkommen.

Danke!

-

Edit: Wie Jakub vorgeschlagen, ich habe meinen Code auf die folgende Aktualisierung:

<?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 } ?> 

Aber ich denke, ich habe muss etwas verpasst haben, weil ich total bin immer von "col-md-12" für alle Zeilen.

Answer 1

Unter der Annahme, dass "Get_Field" gibt das Array mit allen Zeilen, dann müssen Sie folgend ändern:

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

mit diesem:

<?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 --> 

Einer kurzen Erklärung:

1. Zunächst setzen wir den Multiplikator auf 1 (also 6 * 1 = 6 für gepaarte Spalten).
2. wir tun eine Bedingung, um zu überprüfen, ob die Anzahl der Artikel sogar ist, und wir verarbeiten derzeit den letzten Artikel. Wenn ja - wir setzen den Multiplikator auf 2 (so dass 6 * 2 = 12 für eine einzelne Spalte)
3. wir setzen die Klasse zu "col-md-" und das Ergebnis unserer Berechnung (entweder 6 oder 12)