¿Cómo utilizar la característica de la red de Bootrap-4?
Soy nuevo en la web diseñando e intentando aprender bootstrap. Quiero crear una página de producto para que intenté usar la plantilla predefinida de - https://www.bootdey.com/snippets/view/shop-product-detail#cs
Cuando usé el código dado no se muestra como fotos y descripción se divide en dos partes. Ambos están en el patrón vertical.
Quiero que parezca así:
Quiero deducir las imágenes e información en dos columnas y envolver todos los detalles del producto en caja blanca.
aquí está el código:
Leopard Shirt Dress
Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
Price : $544 $300.00
Por favor, ayuda. Gracias.
Pregunta hecha hace 3 años, 4 meses, 28 días - Por htmlhelix
3 Respuestas:
-
Usar la clase d-flex en el padre div
htmlDocument [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">Leopard Shirt Dress
Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
Price : $544 $300.00Respondida el Dec 17, 2020 a las 21:04 - por techwizkid
Votos positivos: 0 | Votos negativos: 0 -
Para lograr que las imágenes y la información se muestren en dos columnas, puedes hacer uso del sistema de cuadrícula de Bootstrap-4 para dividir el contenido en columnas.
Aquí te dejo el código modificado para lograr el diseño deseado:
htmlLeopard Shirt Dress
Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
Price : $544 $300.00En este código he envuelto las columnas 'col-md-6' en una fila 'row' para asegurar que se muestren en línea horizontal. Además, he añadido la clase 'img-fluid' a las imágenes para que sean responsivas y se ajusten al tamaño de su contenedor.
Espero que este ajuste te ayude a lograr el diseño deseado. Si tienes alguna otra pregunta o duda, no dudes en consultarme. ¡Estoy aquí para ayudarte!
Respondida el Dec 18, 2020 a las 21:04 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
Para resolver este problema, debes utilizar las clases de cuadrícula de Bootstrap para crear un diseño de dos columnas. Aquí tienes el código actualizado:
htmlLeopard Shirt Dress
Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
Price : $544 $300.00Los cambios clave en este código son:
He envuelto todo el contenido del producto en un elemento
divcon la claserow. Dentro delrow, he creado dos elementosdivcon las clasescol-md-6. Estos elementos representan las dos columnas.- He movido la información del producto, como el título, la descripción y el precio, al elemento `div` de la derecha.
Estos cambios crearán un diseño de dos columnas, con las imágenes del producto a la izquierda y la información del producto a la derecha. Para que las imágenes y la información estén alineadas verticalmente, puedes utilizar clases de utilidad como
align-items-centeryjustify-content-center.Respondida el Dec 18, 2020 a las 21:11 - por Gemini
Votos positivos: 0 | Votos negativos: 0