Soy incapaz de tener un carrusel con sólo texto sin ningún img. El texto parece estar en colisión con los controles. Cada ejemplo que he encontrado utiliza el <img>. He tratado de usar d-flex clase, bloquear e incluso la carousel-caption. Nada ha funcionado hasta ahora.

<div id="carouselContent" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <p>lorem ipsum (imagine longer text)</p>
        </div>
        <div class="carousel-item">
            <p>lorem ipsum (imagine longer text)</p>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
  • hizo usted trate de añadir un poco de relleno en .carousel-inner?
  • La adición de padding-left acerca de 200px y padding-bottom acerca de 50px algo funciona pero no se ve muy bien con el carrusel de los controles. Yo, obviamente, puede intentar la posición de ellos, también. Sin embargo, se considera que debe haber una mejor manera de hacerlo.
InformationsquelleAutor Santhos | 2017-01-09

2 Comentarios

  1. 4

    Creo que el carousel-controls están diseñados para cubrir el contenido, ya sea texto o imágenes. Parece que text-center sería una buena opción para centrar el texto de cada elemento.

    Sin embargo, a partir de BS alfa 6, el .carousel-item es display:flex; que limita algunas de las de posicionamiento que se puede hacer con el contenido de carousel-item. Hay un tema abierto para esto:
    https://github.com/twbs/bootstrap/issues/21611

    Como una solución, puede utilizar text-center y reemplazar display:block para el activo carrusel elemento:

     <div class="carousel-item text-center p-4">
           <p>lorem ipsum (imagine longer text)</p>
     </div>
    
    .carousel-item.active {
        display:block;
    }
    

    Demo: http://www.codeply.com/go/OJHdvdXimm


    Véase también: Verticalmente el centro de texto en Bootstrap carrusel

    • Vi el tema, pero de alguna manera me dio la sensación de que no estaba relacionado. display: block definitivamente ayuda. He intentado añadir 100px de relleno izquierdo y derecho. Que encaja bien el texto entre los controles, pero la animación es funky.
    • Es allí una manera de conseguir las flechas de mostrar con esto?
    • Las flechas muestran con ella.
  2. 0

    He añadido px-5 en todas partes (en su caso en p). Necesitaba espacio a su alrededor y también se ha añadido una clase a la que le dio un margen de 20 píxeles. Esto funcionó.

Dejar respuesta

Please enter your comment!
Please enter your name here