elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Análisis del vídeo del hackeo al Sindicato de los Mossos de Esquadra


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  problemma con cards bootstrap4 cards-columns
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: problemma con cards bootstrap4 cards-columns  (Leído 461 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 526


youtu.be/0YhflLRE-DA


Ver Perfil
problemma con cards bootstrap4 cards-columns
« en: 28 Junio 2020, 13:07 »

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


En línea

{_id: "5ef16999f6ce240abc225ss3",
nombre: "Ana Keldysh",
nacionalidad: "Argentina",
edad: "17",
profesion: "Desarrollador Web Full Stack",
"__v": 0
}
[u]nsigned


Desconectado Desconectado

Mensajes: 2.358

Vue SSr


Ver Perfil WWW
Re: problemma con cards bootstrap4 cards-columns
« Respuesta #1 en: 29 Junio 2020, 00:06 »

Tenes que hacerlo con las clases de flexbox y css grid que te da BT4. O postea aca tu html y te digo como acomodarlo.

https://getbootstrap.com/docs/4.0/utilities/flex/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/


En línea

Beginner Web


Desconectado Desconectado

Mensajes: 526


youtu.be/0YhflLRE-DA


Ver Perfil
Re: problemma con cards bootstrap4 cards-columns
« Respuesta #2 en: 30 Junio 2020, 04:03 »

Código
  1. <div class="c2">
  2.  <h3 *ngIf="items.length>0" class="font-weight-bold">Items</h3>
  3.  <div class="card-columns">
  4.    <div *ngFor="let a of items">
  5.      <div class="card">
  6.        <a href=""> <img class="card-img-top" [src]="a.imagen" alt="Card image cap"></a>
  7.    </div>
  8.  </div>
  9. </div>

ese es el codigo html
En línea

{_id: "5ef16999f6ce240abc225ss3",
nombre: "Ana Keldysh",
nacionalidad: "Argentina",
edad: "17",
profesion: "Desarrollador Web Full Stack",
"__v": 0
}
[u]nsigned


Desconectado Desconectado

Mensajes: 2.358

Vue SSr


Ver Perfil WWW
Re: problemma con cards bootstrap4 cards-columns
« Respuesta #3 en: 30 Junio 2020, 05:38 »

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

Código
  1. <div class="c2">
  2.  <h3 *ngIf="items.length>0" class="font-weight-bold">Items</h3>
  3.  <div class="row">
  4.    <div *ngFor="let a of items" class="col-sm-4">
  5.      <div class="card">
  6.        <a href=""> <img class="card-img-top" [src]="a.imagen" alt="Card image cap"></a>
  7.    </div>
  8.  </div>
  9. </div>
  10.  

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
En línea

Beginner Web


Desconectado Desconectado

Mensajes: 526


youtu.be/0YhflLRE-DA


Ver Perfil
Re: problemma con cards bootstrap4 cards-columns
« Respuesta #4 en: 2 Julio 2020, 07:12 »

no funciona muestra cualquier orden y aparte las imagenes tienen diferentes tamaños
En línea

{_id: "5ef16999f6ce240abc225ss3",
nombre: "Ana Keldysh",
nacionalidad: "Argentina",
edad: "17",
profesion: "Desarrollador Web Full Stack",
"__v": 0
}
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Photoshop Tutorial: Playing Cards
Diseño Gráfico
+ enrique ZP 2 2,257 Último mensaje 30 Noviembre 2007, 21:43
por Azielito
Business Cards de Plástico.
Diseño Gráfico
antonelli 1 1,811 Último mensaje 11 Julio 2008, 16:08
por Azielito
Clonacion de SIM cards « 1 2 »
Hacking Mobile
berz3k 15 46,728 Último mensaje 7 Abril 2010, 08:50
por SirGraham
Compilado de flash cards... posible?
Hardware
Fede CC 0 786 Último mensaje 4 Mayo 2011, 03:14
por Fede CC
ngfor de cards paginado
Desarrollo Web
Beginner Web 0 144 Último mensaje 27 Junio 2020, 15:01
por Beginner Web
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines