1

Estoy usando un UI KIT basado en Bootstrap 4 (v4.5), a mi index le agregué un card-group de 3 cards que en la PC se mira bien, sin embargo no logro que se vean igual en Mobile.

Busco que esas 3 cards se vean juntas horizontalmente desde un smartphone y no individualmente de forma vertical como se mira en la imagen.

Ya probé agregando un col-sm de manera individual a cada card y removiendo el card-group pero no funcionó. Y también revisé en un dispositivo real

Mi código:

<link href="https://demos.creative-tim.com/material-kit-bs4/assets/css/material-kit.min.css" rel="stylesheet"/>
<body>
<div class="container">
         <h2 class="title text-center text-white"><img src="img/dg.png" alt="ejemplo" width=60 height=60> Ejemplo</h2>
         <div class="row justify-content-center">
            <div class="col-md-8">
               <div class="card-group">
  <div class="card card-nav-tabs text-center">
    <div class="card-header card-header-primary">1</div>
    <div class="card-body">
      <input type="text" class="form-control" value="Rnd" placeholder="Rnd">
    </div>
  </div>
  <div class="card card-nav-tabs text-center">
    <div class="card-header card-header-primary">2</div>
    <div class="card-body">
      <select name="mes" class="form-control">
                <option value="rnd">Rnd</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
              </select>
    </div>
  </div>
  <div class="card card-nav-tabs text-center">
    <div class="card-header card-header-primary">3</div>
    <div class="card-body">
      <select name="anio" class="form-control">
                <option value="rnd">Rnd</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
                <option value="2025">2025</option>
                <option value="2026">2026</option>
                <option value="2027">2027</option>
                <option value="2028">2028</option>
              </select>
    </div>
  </div>
</div>
            </div>
         </div>
      </div>
</body>

Screenshots:

PC VISTA PC

Mobile (Simulador de Chrome)

mobile

3
  • 1
    Al usar bootstrap haces uso de sus media query para el responsive. Tendrán que añadir en tu css un media query para el tamaño de pantalla que quieras y cambiar la propiedad de la clase .card-group flex-direction y establecerla como row el 3 mar. 2022 a las 10:39
  • @ÓscarNovás me podrías orientar más o ayudarme con un fragmento de código? o algun lugar donde pueda aprender de eso? No sé mucho:( el 3 mar. 2022 a las 10:45
  • Ya lo he investigado, me guié con esto en base a lo que me dijiste y funcionó! Muchisimasgracias amigo! enlace el 3 mar. 2022 a las 10:51

1 respuesta 1

1

Me funcionó agregando flex-direction: row; a mi style.css quedando así:

@media(max-width:200px) {
    .card-group {
        text-align: center;
        flex-direction: row;
    }
}
@media(max-width:600px) {
    .card-group {
        text-align: center;
        flex-direction: row;
    }
}
@media only screen and (min-width:600px) {
    .card-group {
        text-align: center;
        flex-direction: row;
    }
}

Les agradezco mucho.

1
  • 1
    No olvides aceptar tu respuesta cuando transcurra el tiempo mínimo.
    – padaleiana
    el 3 mar. 2022 a las 12:07

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.