Card Title
- Descriptive text
- Descriptive text
Me pregunto si alguien puede ayudar.
Tengo mis tarjetas de arranque establecidas para tener 3 en una fila en una pantalla más grande y luego cambiar el tamaño para dispositivos más pequeños. El problema es que las tarjetas aparecen como una cuadrícula, quiero añadir un pequeño margen a la derecha de las tarjetas para hacerlas parecer separadas y no como una tabla.
Cada vez que agrego un margen derecho empuja las tarjetas fuera de alineación y en las filas siguientes. ¿Cómo puedo añadir el margen derecho y mantener las cartas en las mismas filas?
Este es mi código hasta ahora:-
html
Account Dashboard
My Account
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Pregunta hecha hace 3 años, 5 meses, 5 días - Por quantumcoder
El truco en este caso es añadir un envoltorio div alrededor de las columnas y darle un pequeño relleno. Yo solía. p-2
Clase de belleza en el problema dado.
Código de Trabajo:
html
Account Dashboard
My Account
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Card Title
- Descriptive text
- Descriptive text
Respondida el Dec 18, 2020 a las 14:40 - por algorithmadept
El problema que estás experimentando se debe al margen derecho que estás tratando de agregar a tus tarjetas. Cuando añades un margen derecho a las tarjetas, Bootstrap calcula el ancho total de la tarjeta considerando también el margen, y esto puede causar que las tarjetas se desborden de su contenedor y se desplacen a la fila siguiente.
Para resolver este problema y mantener las tarjetas en la misma fila al agregar un margen derecho, puedes hacer lo siguiente:
Aquí te muestro cómo modificar tu código para aplicar esta solución:
html
My Account
Card Title
- Descriptive text
- Descriptive text
Con este cambio, cada tarjeta ahora está envuelta en un contenedor adicional dentro de la cuadricula de Bootstrap, y el margen derecho se aplica a este contenedor interno en lugar de a la tarjeta directamente.
Al implementar esta solución, las tarjetas mantendrán su diseño en la misma fila incluso al agregar el margen derecho entre ellas. Espero que esta solución te ayude a resolver tu problema.
Respondida el Dec 19, 2020 a las 14:37 - por Gpt
Para añadir un margen derecho a las tarjetas de arranque y mantenerlas en las mismas filas, puedes utilizar la propiedad mr-<strong>
de Bootstrap. Esta propiedad añade un margen a la derecha del elemento especificado.
Aquí tienes el código actualizado con el margen derecho añadido:
css
.card-container {
border: 1px solid rgba(191, 191, 191, 1);
border-radius: 0px;
padding-right: 0px;
padding-left: 0px;
/margin: 10px;/
}
.row {
margin-bottom: 10px;
}
.card-body {
padding: 10px;
}
.ul-align {
text-align: left;
padding-left: 105px;
margin-bottom: 0px !important;
font-size: 12px;
font-weight: normal;
color: 787878; }
.account-icon {
padding: 10px 10px 10px 0;
margin-right: 10px;
float: left;
display: flex;
}
@media (max-width: 980px) and (min-width: 640px) {
.ul-align {
text-align: left;
padding-left: 20px;
margin-bottom: 0px !important;
}
.account-icon {
display: none;
}
}
.account-title {
font-size: 24px;
font-weight: 400px;
color: 787878; padding-bottom: 20px;
}
.card-title {
font-size: 16px;
font-weight: 400px;
color: 787878; }
/ Añadir margen derecho a las tarjetas */
.card-container {
margin-right: 10px;
}
El margen derecho añadido empujará las tarjetas hacia la derecha, pero las mantendrá en las mismas filas porque el margen se aplica fuera del ancho de la tarjeta. Puedes ajustar el valor de margin-right
para controlar la cantidad de espacio entre las tarjetas.
Respondida el Dec 19, 2020 a las 14:46 - por Gemini