Bootstrap tab content set tarjetas lado a lado
Estoy tratando de conseguir las tarjetas de contenido lado a lado en 3's, cada línea de 3 cartas viene una nueva fila con otro 3, he intentado establecer flex-wrap: nowwrap;
Funcionó pero las cartas seguían sin parar no entraron en filas en cada 3 o 4 cartas,
Intenté añadir display:inline-block
y otros ajustes de visualización pero no trabajado por alguna razón.
Aquí está el código HTML y CSS que estoy usando gracias!
CSS
#cover {
height: 100%;
text-align: center;
margin: 0 auto;
}
#cover-caption {
width: 100%;
position: relative;
z-index: 1;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
HTML
Pregunta hecha hace 3 años, 5 meses, 4 días - Por algorithmalchemist
4 Respuestas:
-
Esto es todo:
css:
.card-img-top { width: 100%; height: 15vw; object-fit: cover; }
html:
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere:https://jsfiddle.net/4fsw6ed0/7/
Respondida el Dec 18, 2020 a las 19:44 - por bytebison
Votos positivos: 0 | Votos negativos: 0 -
Acabas de arruinar con el diseño de la cuadrícula de arranque y el punto de rotura de la columna. Las clases de columna indican el número de columnas que desea utilizar de los 12 posibles por fila. Así que, si quieres tres columnas de igual ancho, puedes usar .col-4. Por favor, revise el siguiente código
html
Document [email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">Respondida el Dec 18, 2020 a las 19:50 - por codergeek24
Votos positivos: 0 | Votos negativos: 0 -
Para lograr que las tarjetas de contenido se muestren lado a lado en grupos de 3, puedes realizar algunos ajustes en tu código CSS y HTML. Aquí te dejo algunas recomendaciones:
- Agrega una clase adicional a tus tarjetas para controlar su ancho y margen:
html
- Define reglas CSS para la clase `.card-wrapper` que establezca el ancho, margen y flex-wrap necesario:
css .card-wrapper { width: 33.33%; / Establece que cada tarjeta ocupe el 33.33% del contenedor / margin-right: 1rem; / Añade un margen derecho para separar las tarjetas / } @media (max-width: 768px) { .card-wrapper { width: 100%; / En pantallas más pequeñas, las tarjetas ocuparán el ancho completo / margin-right: 0; / Quita el margen lateral para que las tarjetas se muestren una debajo de la otra / } } .row { display: flex; flex-wrap: wrap; / Permite que las tarjetas se envuelvan si no caben en una fila / justify-content: center; / Centra las tarjetas horizontalmente en el contenedor / }
Con estos cambios, tus tarjetas deberían mostrarse en líneas de 3 en todo momento y ajustarse automáticamente en pantallas más pequeñas. Ajusta los valores de ancho y margen según tus necesidades de diseño. ¡Espero que esta solución te sea útil!
Respondida el Dec 19, 2020 a las 19:45 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
Para que las tarjetas de contenido de Bootstrap estén alineadas una al lado de la otra en 3, cada fila de 3 tarjetas en una nueva fila con otras 3, puedes utilizar el siguiente código CSS:
css .tab-content .row { flex-wrap: wrap; justify-content: space-around; } .tab-content .card { flex: 1 0 20rem; margin: 0 1rem 1rem 0; }
Este código añade una clase
row
al contenedor de tarjetas y estableceflex-wrap: wrap
para permitir que las tarjetas se envuelvan en varias líneas. También establecejustify-content: space-around
para distribuir las tarjetas uniformemente en el contenedor.Para cada tarjeta, establece
flex: 1 0 20rem
para que las tarjetas tengan un ancho mínimo de 20rem y se expandan para ocupar el espacio disponible. El margenmargin: 0 1rem 1rem 0;
añade un margen entre las tarjetas.Ejemplo actualizado:
html
Wow
Colorful Sunset
Snowcapped Winter
Nota: asegúrate de que el contenedor padre de las tarjetas tenga un ancho suficiente para acomodar las tarjetas una al lado de la otra.
Respondida el Dec 19, 2020 a las 19:52 - por Gemini
Votos positivos: 0 | Votos negativos: 0