Saltar al contenido

Ancho y alto del carrusel Bootstrap

este problema se puede tratar de diferentes maneras, sin embargo te mostramos la que para nosotros es la resolución más completa.

Solución:

¿Estás tratando de hacerlo receptivo? Si es así, solo recomendaría lo siguiente:

.tales 
  width: 100%;

.carousel-inner
  width:100%;
  max-height: 200px !important;

Sin embargo, la mejor manera de manejar esto de manera receptiva sería mediante el uso de consultas de medios como este:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) 

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) 

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) 

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) 

Si utiliza arranque 4 Alpha y tienes un error con la altura de las imágenes en chrome, tengo una solución: La documentación de bootstrap 4 dice esto:


Solución:

La solución es poner “div” alrededor de la imagen, con la clase “.container”, así:


Sé que esta es una publicación anterior, ¡pero Bootstrap todavía está vivo y coleando!

Ligeramente diferente a la publicación de @Eduardo, tuve que modificar:

#myCarousel.carousel.slide 
    width: 100%; 
    max-width: 400px; !important

Cuando solo modifiqué .carousel-inner la imagen real tenía un tamaño fijo pero los controles izquierdo/derecho se mostraban incorrectamente al lado de la div.

Aquí puedes ver las comentarios y valoraciones de los lectores

Si para ti ha sido útil nuestro post, agradeceríamos que lo compartas con otros entusiastas de la programación de este modo contrubuyes a extender esta información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *