0

Estoy intentado crear una sección de artículos de un e-commerce, el problema que tengo es que estoy utilizando las grid de bootstrap, quiero que aparezcan 6 artículos por linea en Desktop pero tengo un problema y es que les tengo un margin a los artículos para que se separen un poco y se vea bien y al hacer esto no se centra respecto al contenedor. alguien sabría como poder arreglar esto? Se que es el margin que hace que se rompa pero como podria solucionarlo y que se vea bien, tambien tengo un problema y esque lo tengo puesto que tablets se vean 3 y en moviles 2, sin embargo esto no sucede. este es el código:

    <div class="row articles container mx-auto">
    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 article">
        <div class="article-img">
            <img src="static/img/article-test.jpg" alt="">
        </div>
        <div class="article-info">
            <h3 class="article-name">Conjunto Completo</h3>
            <p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
            <div class="article-info-bottom">
                <h4 class="article-price">$2.40</h4>
                <div class="icon-container">
                    <svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                    </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                </svg> -->
                </div>
            </div>    
        </div>    
    </div>

</div>

css
.article{
    margin: 20px 5px 20px 5px;
    background-color: yellow;
}

introducir la descripción de la imagen aquí Asi es como se ve, esta un poco mas a la izquierda introducir la descripción de la imagen aquí Necesito que quede asi centrada pero con los espacios entre si, y que sean 6 por linea

4
  • Elimina esa margin en la clase .article y revisa la clase .justify-content que te permite centrar y separar los elementos de forma automática sin necesidad de márgenes. getbootstrap.com/docs/5.0/utilities/flex/#justify-content el 23 jun. 2021 a las 18:11
  • Si Hago eso no me lo separa, quedan pegadas; necesito el margen para que se vea bien separadas entre si el 23 jun. 2021 a las 18:38
  • Puedes darle en editar a tu pregunta y muestra lo que estás intentando el 23 jun. 2021 a las 20:14
  • ya puse imagenes para que quede mas claro lo que necesito el 23 jun. 2021 a las 20:24

1 respuesta 1

0

Veamos, no se que imagen usas. Yo he probado con una imagen escalada para que entre en la celda (a un 95%). A cada imagen le he puesto las clases "d-block mx-auto". Y la verdad es que se ven separadas y centradas.
Le puedes añadir una clase para controlar el tamaño o un max-width, eso a tu gusto.
A parte de esto te falta un cierre de div al final y tienes etiquetas clss repetidas en los svg

<svg **class**="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" **class**="bi bi-heart" viewBox="0 0 16 16">

No afecta al problema pero no es correcto. En lo que yo veo funciona y es responsive. Si he interpretado bien la pregunta creo que esta solución te arregla el problemilla. Saludos
EDITO Entonces lo que necesitabas centrar es el bloque con las imágenes, que al poner el margen como no caben los 6 se redistribuyen y se descentra. ESo es flex puro. Creo que esto si te soluciona el problema.
He añadido un estilo justify-content: center al bloque articles, y he puesto margen a los div contenidos en articulos. Concretamente en la página he añadido esto

.articles div{
margin: 20px 10px;}
.articles{
justify-content:center;
}

Si quieres verla la tienes en
https://creatuweb.espaciolatino.com/ejemplos/hamburgueseria.htm
Comprueba el código fuente de la página para verel cambio, está en un style en la sección head.

4
  • no eh hecho nada de lo que me dijiste y se ve asi imgur.com/XpL3mxp hice lo que me dijiste y sigue sin estar centrada imgur.com/6bIEExz , si notas esta mas a la izquierda el 23 jun. 2021 a las 18:11
  • Realmente entendí que el problema estaba en las imágenes, y fue lo que centré, porque el bloque lo veo centrado en mi ejemplo. La clase container lo centra, salbvo que en article tengas algo que no veo. Puedes ver como yo lo tengo y se ve centrado creatuweb.espaciolatino.com/ejemplos/hamburgueseria.htm. Mira el código fuente a ver si hay algo diferente con tu página, ya te digo que la clase articles no la tengo, quizás haya alguna diferencia que altera el centrado.
    – Juan
    el 23 jun. 2021 a las 19:25
  • si, lo que pasa esque se te centra porque tienen un margin de 0 entre si imgur.com/dKkBxYu, pero yo necesito que tengan un margin para que se vea mejor mas estetico pero cuando les pongo el margin es que deja de estar centrado imgur.com/yrVY0Qv imgur.com/RhUJKhn mira las imagenes. Mi pregunta es como hago que aparezcan los 6 por fila, esten separadas entre si y que se mantenga centrado el 23 jun. 2021 a las 19:41
  • Lo ultimo que recomendaste funciona hasta cierto punto... imgur.com/abXUsdK como ves, los de la segunda linea se centran al medio tambien cuando no llenan la fila lo cual es poco afectivo para un ecommerce que es lo que estoy haciendo. Necesito algo como esto imgur.com/3zO6aOD pero centrado, y que sean 6 por linea. Eh intentado todos los metodos que me recomiendan y no lo consigo el 24 jun. 2021 a las 14:05

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.