es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo evitar que el grupo de tarjetas se desborde en pantallas pequeñas?

23 Jul, 2023 Programación

Cómo mantener las tarjetas en un grupo de tarjetas conectadas una al lado de la otra en una pantalla más pequeña?

Están conectadas en una pantalla más grande, pero separadas en una pantalla más pequeña. Estoy ocultando las tarjetas adicionales en una pantalla más pequeña y prefiero usar las primeras tarjetas conectadas.

Con este código, las tarjetas se separan a partir de 575px.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">
  <div class="card-group">
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card d-none d-md-block">
      ...
    </div>
    <div class="card d-none d-lg-block">
      ...
    </div>
    <div class="card d-none d-xl-block">
      ...
    </div>
  </div>
</div>

¿Cómo mostrar las primeras tres tarjetas conectadas en una pantalla pequeña?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para seguir mostrando las primeras tres cards adjuntas en una pantalla más pequeña, puedes usar la propiedad flex-wrap: nowrap para evitar que las cards pasen a la siguiente línea. Añade el siguiente CSS al elemento card-group:

    .card-group {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

    Esto creará un desplazamiento horizontal en la pantalla más pequeña para que el usuario pueda desplazarse horizontalmente y ver las otras cards. Es posible que también necesites ajustar el ancho del elemento card y el padding/margin para asegurarte de que las cards se ajusten correctamente en la pantalla más pequeña.

Comments are closed.