Discussion :

[lnquaidorsay]

Bonjour,

j'ai un soucis d'affichage avec mes card ; Je les affiche de cette manière avec les données suivantes provenant de mon component.ts angular

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
myArrayData = [
  {id:1,pictureURL:'asset/mypict1.png'},
  {id:2,pictureURL:'asset/mypict2.png'},
  {id:3,pictureURL:'asset/mypict3.png'},
  {id:4,pictureURL:'asset/mypict4.png'}
]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="row">
  <ng-container *ngFor="let cat of category; let index=index">
    <div class="col-md-6" >
      <div class="card">
        <a href="#"  >
          <img [src]="cat.url"
          [alt]="cat.nom" style="border:solid 1px #555;" [title]='cat.nom' />
       </a>
      </div>
    </div>
    <div class="w-100" *ngIf="(index+1) % 2 === 0"></div>
  </ng-container>
 
</div>

mais par contre le résultat obtenu ajoute du padding left et padding right.

Comment faire pour le supprimer et mettre un margin bottom entre les row 1[row contenant les images 1 et 3] et le row 2 [row contenant les images 2 et 4]

[henneka]

Bonjour,

As tu éssayé la classe bootstrap no-gutters pour les padding?

Et la classe mb-2 (de 1 a 5) ou mt-2(de 1 a 5) pour margin bottom ou margin top ?

[Invité]

Bonjour,

1- Ce sont les balises <ng-container> qui posent problème, là où elle sont, empêchant les fusions de marges entre "row" et "col-md-6".

2- Pas sûr que la <div class="w-100"...> soit nécessaire.