0

tengo este codigo con bootstrap, en la que el div que contiene la imagen (zapatos.jpg) deberia en pantallas pequeñas ocupar un largo de 2, y en grandes un largo de 1. Pero me aparece como veis en la foto esta: https://postimg.cc/Q99tz33r , que es en una pantalla pequeña, y aparece como si ocupara toda la fila osea 12. Como se ve en la foto, aparece la imagen y coloreado en color secondary toda la columna que ocupa toda la fila.

<html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="jsBootstrap/jquery-3.4.1.min.js"></script>
    <script src="jsBootstrap/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container-fluid">
        <div class='row align-items-center'>
            <div class='col-sm-2 col-lg-1 bg-secondary' >  
                <img class='d-block' src='zapatos.jpg' style='width:75px;height:93.75px;'>
            </div>
            <div class='col-sm-10 col-lg-11'>
                <div class='container'>
                    <div class='row'>
                        <div class='col-sm-12 col-lg-8 bg-danger'>
                            <div>Nombre</div>              
                        </div>
                        <div class='col-sm-12 col-lg-4 d-sm-block d-lg-flex flex-lg-row-reverse'>
                            <div class='d-lg-inline-flex d-sm-flex'>precio</div>
                            <div class='d-lg-inline-flex d-sm-flex'>unidades</div>
                        </div>
                    </div>
                </div>
            </div>              
        </div>
    </div>
    </body>
</html>
3
  • Qué versión de Bootstrap estás usando? Las versiones 3 y 4 utilizan ancho completo (12 col) para resoluciones menores a las que se indican, en este caso, usaría 2 columnas a partir del breakpoint correspondiente a sm, y 12 columnas para resoluciones menores a ese breakpoint
    – Erica T.
    el 27 dic. 2020 a las 3:45
  • la version de bootstrap es la v4.4.1, pero he actualizado a la 5 y sigue igual el 27 dic. 2020 a las 13:03
  • 1
    en vez de utilizar el break point sm utiliza xs ó en todo caso evita los break points y solo pon: col-2 y col-10
    – Shassain
    el 27 dic. 2020 a las 16:12

1 respuesta 1

-2

parece ser que bootstrap 4 en adelante no cuenta con tamaño xs. En mi codigo no uso xs sino que uso sm, pero deberia usar xs para pantallas pequeñas. En bootstrap 4 en adelante en vez de col-xs-2 se utiliza col-2. Entonces lo he resuelto y queda asi:

<html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="jsBootstrap/jquery-3.5.1.min.js"></script>
    <script src="jsBootstrap/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container-fluid">
        <div class='row align-items-center'>
            <div class='col-2 col-lg-1 bg-secondary' >  
                <img class='d-block' src='zapatos.jpg' style='width:75px;height:93.75px;'>
            </div>
            <div class='col-10 col-lg-11'>
                <div class='container'>
                    <div class='row'>
                        <div class='col-sm-12 col-lg-8 bg-danger'>
                            <div>Nombre</div>              
                        </div>
                        <div class='col-sm-12 col-lg-4 d-sm-block d-lg-flex flex-lg-row-reverse'>
                            <div class='d-lg-inline-flex d-sm-flex'>precio</div>
                            <div class='d-lg-inline-flex d-sm-flex'>unidades</div>
                        </div>
                    </div>
                </div>
            </div>              
        </div>
    </div>
    </body>
</html>

Tu Respuesta

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

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