1

estoy haciendo un sistema de ventas y en los productos, los estoy haciendo con divs, me gustaría saber como ponerlos como en la siguiente foto. introducir la descripción de la imagen aquí

La web la vi por internet y me llamó la atención porque al hacerla más chica, los 3 objetos mostrados en la imagen se alinean verticalmente, ocupando toda la pantalla. Os lo muestro en la siguiente imagen.

introducir la descripción de la imagen aquí

Aquí está el código de mi web.

    <div class="item  col-xs-4 col-lg-4">
    <div class="thumbnail">
        <img class="group list-group-image" src="{{url_for('static', filename='img/products/100.png')}}" width="400px">
        <div class="caption">
            <h4 class="group inner list-group-item-heading">
                100 Followers (Test Us!)</h4>
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <p class="lead">
                        $4</p>
                </div>
                <div class="col-xs-12 col-md-6">
                    <a class="btn btn-success" href="">Add to cart</a>
                </div>
            </div>
        </div>
    </div>
</div>

Son varios divs así repetidos, os lo enseño en la siguiente imagen.

introducir la descripción de la imagen aquí

Lo que me gustaría hacer es como en la otra página, que sea adaptable, os dejo el link de la otra página.

Este es

Muchas gracias.

5 respuestas 5

2

Una opción que yo suelo usar a veces si uso los grid manualmente es utilizar media queries en CSS para controlar el grid-template-columns para que según el tamaño de la ventana se ajuste a como dices que quieres.

En el div padre de todas las tarjetas deberías poner:

display: grid;
grid-template-columns: auto auto auto;

PD: Es un ejemplo, de esta forma serían 3 columnas con tamaños automáticos.

Y añadir en el CSS:

@media only screen and (max-width: 600px) {
  .mainItems {
    grid-template-columns: auto;
  }
}

Esto haría que si el tamaño de la pantalla horizontal tiene menos de 600px, se pondrían las tarjetas en 1 columna.

Aquí tienes algunos ejemplos interesantes.

1
2

La forma mas común y facil de hacer una aplicación web responsiva es el uso de media query que suelen tener la siguiente estructura:

@media only screen and (max-width:600px)
{
 css code
} 

Básicamente los estilos dentro de tu media query se van a tomar cuando la pantalla de tu dispositivo sea menor a 600px aquí te comparto un enlace para que aprendas mas de la sintaxis de los media query

Te recomiendo:

1.Utilizar unidades relativas para los segmentos generales de tu web para reducir el uso de los media querys. Unidad de medida absolutas y relativas

2.Usar Display block mejorar la responsiva(propiedad de css).

3.Uso Metodologías mejora la estructura ,ordenamiento,legibilidad del código .

2

En tu codigo reemplaza en el div contenedor, el col-xs-4 por col-xs-1 Con eso le decis a bootstrap que cuando el viewport sea pequeño (XS) utilice 1 columna para el ancho de la pantalla. Por lo tanto se te van a apilar uno sobre otro.

2

Es fácil con bootstrap, cuando tienes una resolución mayor a 960px (col-lg-4) tu información se verá así:

introducir la descripción de la imagen aquí

todas las resoluciones menores a 960px (col-12) se verán así: introducir la descripción de la imagen aquí

.prueba {
  height: 100px;
  background-color: red;
  border: 1px solid black;
}
<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
		/>
    
<div class="row">
  <div class="prueba col-12 col-lg-4">Hola1</div>
  <div class="prueba col-12 col-lg-4">Hola 2</div>
  <div class="prueba col-12 col-lg-4">Hola 3</div>
</div>

Te recomiendo le des una leidita a la documentación de bootstrap: https://getbootstrap.com/docs/4.4/layout/grid/#grid-options

Te recuerdo que cada col tiene un máximo de 12, en este caso tiene col-lg-4 porque 4 x 3 = 12 con col-lg (lg para resoluciones mayores a Large ≥992px y cuando la resolución sea menor a 992 aplicará el col-12 o sea cada columna ocupará todo su espacio disponible, también hay col-sm, col-md para manejar más resoluciones.

0
1

Bien, entiendo lo que quieres hacer. La mejor manera de hacerlo es de la siguiente.

Te explicaré, yo utilicé bootstrap para decirle que tomara un espacio exacto, ¿cómo lo hice? de la siguiente forma(digamos que también es así, sólo quise darte un ejemplo):

<body>
    <div>
    <div class="container">

       <!-- ! Fila Header  -->

        <div class="row">
            <div id="header" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-2">
                <h1>Header</h1>
            </div>
        </div>

        <!-- ! Fila CUADROS CENTRALES  -->
        <div class="row mb-2">
            <div class="col-sm-12 col-md-4 mb-2">
                <div id="diferente1" class="card">
                    <div  class="card-body">
                        <h1>1</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-4 mb-2">
                <div id="diferente2" class="card">
                    <div  class="card-body">
                        <h1>2</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
                <div id="diferente3" class="card">
                    <div class="card-body">
                        <h1>3</h1>
                    </div>
                </div>
            </div>
        </div>
        <!-- ! Fila PIE DE PÁGINAS  -->
        <div class=" footer row">
            <div id="pie1" class="col-sm-12 col-md-6 align-self-start">
                <h1>Footer 1</h1>
            </div>
            <div id="pie2" class="col-sm-12 col-md-6 align-self-end">
                <h1>Footer 2</h1>
            </div>
        </div>
    </div>
    </div>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>

Ese es el HTML, pero utilicemos las media querys para que este pueda ser algo diferente y se pueda notar un poco:

<style type="text/css">
    #header{
        background-color: lawngreen;
        border:2px solid;
    }
    @media (max-width: 576px) and (max-width: 768px){
        #header{
            background-color: rgb(238, 161, 187) !important;
        } 
        #diferente2{

            background-color: aqua;
            text-align: center !important;

        }
        #diferente3{
            text-align: right;
            background-color: red !important;
        }

    }
    @media (max-width: 768px) {
        #header{
            background-color: aqua;
        }

    }
    .centro>div{
        background-color: red;
        text-align: center;
        border:2px solid;
    }
    @media (max-width: 768px) {
        #diferente1{
            text-align: left;
        }
        #diferente2{
            text-align: right;
        }
        #diferente3{
            background-color: lawngreen;
        }
    }
    .footer>div{
        background-color: yellow;
        border:2px solid;
        font-style:italic;
    }
    #pie1{
        text-align: right;

    }
    #pie2{
        text-align: left;
    }


    @media (max-width: 768px) {
        #pie1,#pie2{
            text-align: center;
        } 
    }

</style>

Pruebalo, y me dices que tal te pareció la idea.

Todo se basa en el uso correcto de las columnas y filas de bootstrap. De acuerdo al tamaño del dispositivo, utilizar las media querys para que tenga la forma que queramos.

También ¿qué podría estar sucediendo? Estás colocando las cartas dentro del container-fluid. La barra de navegación debe ser quién esté fuera del container, y todo lo demás lo trabajas dentro del container para que puedas ver la diferencia, como a continuación:

 <nav class="col-sm-12 navbar navbar-expand-sm bg-dark">
 </nav>

  <div class="container">
 <--- Aquí se trabaja todo, sin incluir el navbar--->
  </div>

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.