0

Actualmente estoy usando Bootstrap 4.1.3 con Vue.js 2.5.17 y tengo un componente de Vue.js llamado 'c-card.vue', esta card no se adapta a celulares, por lo que quiero hacer una card especifica para celulares.

La mejor forma seria crear una c-card_mobile.vue o editar c-card.vue de cierta forma para que cuando detecte que es un dispositivo móvil no use el código que actualmente se encuentra, sino que el nuevo.

Este es la vista donde se listan todas mis cards:

<div class="row mt-5">
    @foreach ($cards as $c)
        <div class="col-md-12">
            <c-card
                card-title="{{ $c->name }}"
                card-sub-title="{{ $c->subtitle }}"
                button-link="{{ $c->url }}"
                card-image="{{ $c->getThumbnailImage() }}"
            </c-card>
        </div>
    @endforeach
</div>

Es aquí donde debería llamar a c-card_mobile.vue o que me recomiendan?

1 respuesta 1

0

Bootstrap provee un sistema de grillas responsiva dependiendo el tamaño de la pantalla del dispositivo. Por ejemplo col-sm-2 para pantallas pequeñas, col-md-2 para dispositivos con pantalla mediana y col-lg-2 para dispositivos con pantallas grandes.

Teniendo esto en cuenta puedes usar las 3 (en combinacion )para que tengan un comportamiento distinto dependiendo la pantalla de esta forma:

<div class="col-sm-1 col-md-2 col-lg-3"></div>

En el ejemplo de arriba, cuando use un dispositivo con pantalla grande la division ocupara 3 columnas, con mediano ocupara dos columnas y con pequeño ocuapara una columna (de las 12 columnas con las que trabaja cada row de bootstrap), sm= small, md= medium, lg=large.

Te dejo mas información acerca de las grid de bootstrap en el siguiente enlace:Documentacion grid bootstrap

4
  • Claro! pero el diseno para moviles es diferente al de otros dispositivos. Hay alguna etiqueta que yo pueda usar para indicar que si el dispositivo es movil utilice un template (con todo el html) o el diseno actual (otro template)?
    – Carlos
    Commented el 25 ene. 2023 a las 15:24
  • Asi es, el diseño es distinto para moviles, la diferencia es el tamaño de la pantalla, gracias al sistema de grillas de bootstrap podemos manejar la maquetación y el ancho de los elementos para brindar una buena experiencia al usuario en cualquier tipo de pantalla. Pero entiendo a que te refieres, me parece poco productivo hacer un template para dispositivos móviles y otro para web, no tiene mucho sentido, pues estas programando para web.... Pero eso es todo lo que puedo aportar, saludos!.
    – David081
    Commented el 25 ene. 2023 a las 15:47
  • Entiendo lo que dices. He agregado unos detalles extras en la pregunta inicial que me gustaria que vieras. Esa es la forma que quiero darle solucion, que opinas?
    – Carlos
    Commented el 25 ene. 2023 a las 17:04
  • Tienes que editar tu pregunta para agregar detalles, no editar mi respuesta.
    – David081
    Commented el 25 ene. 2023 a las 17:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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