Bootstrap4 Cards Arranged in Specific Order

¿Cuál es la mejor manera de organizar 3 tarjetas de arranque en los siguientes pedidos:

  • Tarjeta 1 en el lado izquierdo
  • Card2 y Card3 están en el lado derecho
  • Card2 tiene una altura fija
  • Card3 es flexible dependiendo del tamaño de Card2
  • Card3 tiene una barra de desplazamiento personalizada
  • Las tarjetas son sensibles y se colocan una tras otra en las pantallas móviles.

Por favor, vea la imagen de abajo.

Bootstrap4 cards

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
html

  
     Required meta tags 
    
    

     Bootstrap CSS 
    [email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    

  

    

      

        

          
Card 1

        

      

    

    

      

        

          

            

              
Card 2

            

          

        

        

          

            

            
Card 3

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus massa nec nisl placerat sollicitudin. Phasellus mi massa, sollicitudin eu facilisis sit amet, consequat sit amet urna. Suspendisse laoreet ipsum et varius lobortis. Duis facilisis dui vel finibus dignissim. Nulla facilisi. Donec porttitor nec justo sit amet dapibus. Nam in iaculis purus.

Aliquam at blandit sem. Aenean auctor varius iaculis. In pellentesque orci quis ipsum dapibus, eu mattis nisi feugiat. Cras sollicitudin, magna eget semper placerat, leo dui convallis leo, eget vehicula massa lorem ut orci. Curabitur faucibus nec quam vel vestibulum. Morbi ipsum justo, imperdiet ut laoreet non, feugiat consectetur neque. Pellentesque rutrum bibendum risus, in gravida nisi tristique condimentum. Integer quis varius nulla, sit amet consectetur dui. In rutrum accumsan justo. Maecenas id elementum nisl, nec vulputate justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum facilisis varius. Suspendisse potenti. Maecenas lobortis, justo sed facilisis venenatis, lacus dolor semper ex, in interdum risus metus ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget porta magna.

Vestibulum cursus vitae nulla in aliquam. Vivamus tincidunt ultricies vehicula. Proin nec nunc velit. Nulla sit amet accumsan lacus. Donec nunc purus, egestas ut lorem eget, pretium molestie lectus. Donec pellentesque tempor libero, id sollicitudin tortor finibus at. Donec sagittis nisl eget leo molestie commodo. Nullam posuere felis sed mi euismod, at mattis sapien pellentesque. Morbi sed dui molestie, feugiat sem in, accumsan nisl. Vivamus luctus blandit lacus nec imperdiet. Pellentesque non dapibus risus. Suspendisse vestibulum odio purus, nec placerat eros ultricies nec. Curabitur aliquam sollicitudin ligula, vitae semper ante ornare ac.

Proin gravida bibendum urna id dictum. Morbi nec venenatis odio, nec pulvinar nisi. Sed vehicula nunc augue, eu fringilla magna ornare sed. Curabitur ut eleifend magna. Sed elementum odio dignissim turpis scelerisque, in pulvinar mauris vehicula. Donec dignissim ante velit, vitae imperdiet ipsum placerat at. Etiam id rutrum eros, maximus consectetur ex. Praesent egestas tellus et aliquam rutrum. Praesent eget faucibus odio. Proin quis libero eget risus faucibus faucibus. Curabitur feugiat nibh nec dignissim tempor. Nam ac eros nulla.
            

          

        

      

    

  




     Optional JavaScript; choose one of the two! 

     Option 1: jQuery and Bootstrap Bundle (includes Popper)

Pregunta hecha hace 3 años, 4 meses, 28 días - Por bitcraftsman

2 Respuestas:

  • Para lograr el diseño de tarjetas que mencionas, puedes utilizar las clases de Bootstrap y un poco de CSS personalizado. Aquí te dejo un ejemplo de cómo podrías modificar tu código para cumplir con los requisitos especificados:

    html

  
    
    
    

    
    

    
  
  
    
    
      
    
        
    
          
    
            
    
              
    Card 1
    
            
    
          
    
        
    
        
    
          
    
            
    
              
    Card 2
    
              
            
    
          
    
          
    
            
    
              
    Card 3

    En este código, he agregado una clase CSS personalizada llamada .fixed-height que establece una altura fija y activa el desplazamiento vertical para la tarjeta 2. También he hecho uso de las clases de Bootstrap como .d-flex, .align-items-start, .align-items-stretch y .flex-grow-1 para organizar y controlar la disposición de las tarjetas de acuerdo a tus requisitos.

    Recuerda ajustar los estilos y contenido de las tarjetas según tus necesidades específicas. ¡Espero que esta solución te sea útil!

    Respondida el Dec 19, 2020 a las 16:48 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • HTML:

    html

    
  
    
    
    
      
    
        
    
          
    Card 1
    
        
    
      
    
    
    
    
    
      
    
        
    
          
    
            
    
              
    Card 2
    
            
    
          
    
        
    
        
    
          
    
            
    
              
    Card 3
    
              
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus massa nec nisl placerat sollicitudin.

    CSS:

    css
/ Set fixed height for Card 2 /
.fixed-height {
  height: 300px;
}

/ Add scrollbar to Card 3 /
.card-scroller {
  overflow-y: scroll;
}

    En este código:

    Card 1: Se encuentra en el lado izquierdo con un ancho del 40%. Card 2: Tiene un ancho del 60% y una altura fija de 300px. Card 3:* Comparte el ancho del 60% con Card 2 y tiene un desplazamiento vertical.

    Ten en cuenta que las alturas y los anchos se pueden ajustar según tus necesidades específicas.

    Respondida el Dec 19, 2020 a las 17:00 - por Gemini

    Votos positivos: 0 | Votos negativos: 0