problemma con cards bootstrap4 cards-columns

Iniciado por Beginner Web, 28 Junio 2020, 13:07 PM

0 Miembros y 1 Visitante están viendo este tema.

Beginner Web

como hago para que me muestre mis cards en orden horizontal?

me meustra asi
147
258
369

quiero que me muestre asi
123
456
789

gracias
7w7

[u]nsigned


No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!

Beginner Web

Código (cpp) [Seleccionar]
<div class="c2">
  <h3 *ngIf="items.length>0" class="font-weight-bold">Items</h3>
  <div class="card-columns">
    <div *ngFor="let a of items">
      <div class="card">
        <a href=""> <img class="card-img-top" [src]="a.imagen" alt="Card image cap"></a>
    </div>
  </div>
</div>


ese es el codigo html
7w7

[u]nsigned

El card-columns si o si es vertical, yo te diria que mejor uses simplemente row y col-sm-4, algo asi:

Código (html4strict,3,4) [Seleccionar]

<div class="c2">
  <h3 *ngIf="items.length>0" class="font-weight-bold">Items</h3>
  <div class="row">
    <div *ngFor="let a of items" class="col-sm-4">
      <div class="card">
        <a href=""> <img class="card-img-top" [src]="a.imagen" alt="Card image cap"></a>
    </div>
  </div>
</div>


Asi tendras una sola columna en los dispositivos pequeños, y 3 columnas a partir de los dispositivos medianos. Si queres que las 3 columnas aparezcan recién en dispositivos superiores a 768px en vez de col-sm-4 usa col-md-4

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!

Beginner Web

no funciona muestra cualquier orden y aparte las imagenes tienen diferentes tamaños
7w7