89 votos

La imagen del carrusel de Bootstrap no se alinea correctamente

Por favor, eche un vistazo a la siguiente imagen, estamos utilizando bootstrap carrusel para girar las imágenes. Sin embargo, cuando el ancho de la ventana es grande, la imagen no se alinea con el borde correctamente.

Pero el ejemplo de carrusel proporcionado por bootstrap siempre funciona bien, sin importar el ancho de la ventana. Siguiendo el código.

¿Puede alguien explicar por qué el carrusel se comporta de manera diferente? ¿Tiene algo que ver con el tamaño de la imagen o falta alguna configuración de bootstrap?

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

carousel image

155voto

atrepp Puntos 889

La solución es poner ese código css en su archivo css personalizado

.carousel-inner > .item > img { margin: 0 auto; }

121voto

user1655478 Puntos 38

Con bootstrap 3, sólo hay que añadir las clases responsive y center:

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

Esto hace automáticamente el cambio de tamaño de la imagen, y centra la imagen.

18voto

vekozlov Puntos 307

Me enfrenté al mismo problema y lo resolví de esta manera: Es posible insertar contenido que no sea imagen a Carousel, así que podemos usarlo. Primero hay que insertar div.inner-item (donde harás la alineación central), y luego insertas la imagen dentro de este div.

Aquí está mi código (Ruby):

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Y mi código css (.scss):

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

1voto

rnaka530 Puntos 24

Creo que tengo una solución:

En su página de hoja de estilo personal, asigne la anchura y la altura a coinciden con las dimensiones de su imagen.

Cree una "clase" adicional en ese div superior que se apropie del espacio con los spans...(Se muestra a continuación)

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

Sin tocar el bootstrap.css, en tu propia hoja de estilo, llama a "carrusel" (o la etiqueta que elijas) para que coincida con el ancho y el alto de tu pix original.

.carousel       {
            width: 320px;
            height: 200px;

}

En mi caso, estoy usando imágenes pequeñas de 320x200 para el carrusel. Probablemente hay dimensiones preestablecidas en el bootstrap.css, pero no me gusta cambiar eso para tratar de mantenerse al día con las futuras versiones. Espero que esto ayude~~

1voto

Art L. Richards Puntos 11

Podría tener algo que ver con sus estilos. En mi caso, estoy usando un enlace dentro del div "item" padre, así que tuve que cambiar mi hoja de estilos para que dijera lo siguiente:

.carousel .item a > img {
  display: block;
  line-height: 1;
}

bajo el código boostrap preexistente:

.carousel .item > img {
  display: block;
  line-height: 1;
}

y mi imagen se ve así:

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X