Twig, boucles for imbriqués afin d'afficher 2 éléments par ligne

Résolu
Fontainard Messages postés 68 Date d'inscription   Statut Membre Dernière intervention   -  
Fontainard Messages postés 68 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour jeunes gens,

J'ai un problème très basique au niveau de mes boucles for que je souhaites imbriquer. L'objectif c'est de parcourir tous les éléments de ma liste et de les afficher tels que sur une ligne on puisse afficher deux éléments qui ce suivent dans ma liste

un exemple:

               
    {% for element in listelements %}
               <div class=row>
                        {% for element in 1 %}
                    <div class="pull-right">
                            {{element.id}}
                    </div>
                        {% endfor %}
                    <div class="pull-left">
                               {{element.id}}
                    </div>
               </div>
        {% else %}
         Pas d'éléments
   {% endfor %}


Bien sûr c'est faux, pourriez vous m'aider pour la syntaxe, s'il vous plaît?
A voir également:

1 réponse

jubasse Messages postés 24 Date d'inscription   Statut Membre Dernière intervention   1
 
Salut,

je vois que tu utilise des classes bootstrap.
Alors au lieu de faire sa avec de l'algo, je te propose de faire ça à l'aide de ta mise en forme.

Alors le plus simple je pense est de créer un système de grille avec Bootstrap sachant que tu dispose de 12 colonnes par lignes.

Si tu veux 2 items par ligne il suffit de créer deux divs de 6 colonnes, ce qui te donnera 2 items par lignes.

par exemple :
{% if elements %}
    <div class=row>
	{% for element in listelements %}
            <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                <div class="pull-right">
                    {{element.id}}
                </div>
	    </div>
	{% endfor %}
    </div>
{% else %}
         {{ 'Pas d\'éléments' }}
{% endif %}

Dans cet exemple dans tout les cas tu aura 2 items par lignes, si tu en veux trois alors (12 colonnes / 3 items par lignes = 4 colonnes par items) tu remplace les col-%%-6 par des col-%%-4.

md et lg : tailles standards d'écrans (desktop).
sm et xs : petites tailles d'écrans (mobile).

Tu peux même passer d'une grille de 3 items pour les très grands écrans à 2 pour les écrans moyens jusqu'a 1 pour les plus petits etc ...

Je pense que c'est la meilleur manière de procéder.

En espérant t'avoir aidé.
-1
Fontainard Messages postés 68 Date d'inscription   Statut Membre Dernière intervention  
 
MERCI beaucoup camarade pour cette astuce. Je n'ai pas réussi d'alternatives et cette solution semble la plus facile à mettre en place.
0