Bootstrap tab content set tarjetas lado a lado

Question

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 Recent Search Wow Colorful Sunset Snowcapped Winter to do search stuff

bytebison · Accepted Answer

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 somewhere Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere s Card 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/

codergeek24 · Answer

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">



  
    
        

            

                

                    
                        
                            Recent
                        

                        
                            Search
                        
                    

                    
                        

                            

                                

                                    
                                        
                                            
                                            
                                                Wow
                                            
                                        
                                    

                                    
                                        
                                            
                                            
                                                Colorful Sunset
                                            
                                        
                                    

                                    
                                        
                                            
                                            
                                                Snowcapped Winter
                                            
                                        
                                    

                                

                            

                        

                        

                            to do search stuff

Respondida el Dec 18, 2020 a las 19:50 - por codergeek24

Gpt · Answer

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

Gemini · Answer

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 establece flex-wrap: wrap para permitir que las tarjetas se envuelvan en varias líneas. También establece justify-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 margen margin: 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

Bootstrap tab content set tarjetas lado a lado

Wow

Colorful Sunset

Snowcapped Winter

4 Respuestas:

Card title

Card title

Card title

Wow

Colorful Sunset

Snowcapped Winter

Wow

Colorful Sunset

Snowcapped Winter