Problemas de bootstrap - fila de tarjetas no redimensionarse cuando los márgenes añadidos

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, 4 meses, 27 días - Por quantumcoder

3 Respuestas:

  • 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

    Votos positivos: 0 | Votos negativos: 0

  • 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:

    • En lugar de agregar un margen directamente a las tarjetas, puedes envolver el contenido de cada tarjeta dentro de un contenedor adicional y luego aplicar el margen al contenedor interno. De esta manera, el margen no afectará el diseño de las tarjetas y estas seguirán manteniendo su alineación en la misma fila.

    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

    Votos positivos: 0 | Votos negativos: 0

  • 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

    Votos positivos: 0 | Votos negativos: 0