Twig, boucles for imbriqués afin d'afficher 2 éléments par ligne
Résolu
Fontainard
Messages postés
78
Statut
Membre
-
Fontainard Messages postés 78 Statut Membre -
Fontainard Messages postés 78 Statut Membre -
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:
Bien sûr c'est faux, pourriez vous m'aider pour la syntaxe, s'il vous plaît?
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:
- Twig, boucles for imbriqués afin d'afficher 2 éléments par ligne
- Downloader for pc - Télécharger - Téléchargement & Transfert
- Supercopier 2 - Télécharger - Gestion de fichiers
- Partager photos en ligne - Guide
- Photoshop elements gratuit - Télécharger - Retouche d'image
- Mètre en ligne - Guide
1 réponse
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 :
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é.
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é.
Fontainard
Messages postés
78
Statut
Membre
MERCI beaucoup camarade pour cette astuce. Je n'ai pas réussi d'alternatives et cette solution semble la plus facile à mettre en place.
