0

Cordial Saludo, les muestro lo que tengo hecho con boostrap introducir la descripción de la imagen aquí

Eso me muestra una x cantidad de productos de esa forma en vista escritorio,

cuando pasa a vista celular es asi:

introducir la descripción de la imagen aquí

Todo funciona bien, lo que quiero es que cuando sea vista celular, no se vea 1 solo producto en toda la pantalla si no 2.

Este es el contenedor principal:

<div class="col-sm-8">

            <div class="container">
                <div class="row">

                    <div id="scroll_3">
                        <div id="DATOS_PRODUCTOS"></div>
                    </div>
                </div>
            </div>

    </div>

Y este el contenedor de cada producto:

 <div class="col-sm-3">

                            <img src="<?php echo $RUTA_IMAGEN; ?>" alt="" style="width: 100%;height:250px;">

                </div>

Para el ejemplo con que organice las img es suficiente.

Quedo atento

2

1 respuesta 1

1

Debes agregar col-xs-6 a cada producto (xs es tamaño celular). Ten en cuenta que esto te servirá hasta la versión 3.x, ya que luego se quitó y sm pasó a ser el tamaño más pequeño, por lo que si actualizas el bootstrap tendrás que cambiarlo por col-sm-6 y a col-sm-3 por col-md-3

 <div class="col-sm-3 col-xs-6">

    <img src="<?php echo $RUTA_IMAGEN; ?>" alt="" style="width: 100%;height:250px;">

  </div>
3
  • 1
    Gracias, ya me funcionó el 4 feb. 2020 a las 19:24
  • 1
    En realidad no es necesario el cambio que mencionas según la versión. Lo que puedes usar es la clase .col-x sin un breakpoint definido. Quedaría entonces cada columna de la siguiente manera: <div class="col-6 col-sm-3">Imagen</div>, esto funciona desde la versión 3.x en adelante el 5 feb. 2020 a las 14:00
  • Lo tendré en cuenta! el 5 feb. 2020 a las 14:29

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.