2016-04-05 2 views
1

ich ähnlich wie Bootstrap Carousel Caption moves after transition complete ein Problem habe, aber ich habe immer noch nicht gelöst zu lesen/die Lösung versuchen ...Bootstrap Carousel CSS Text auf Übergang zum aktiven Elemente bewegt

Der Text (in .carousel-Beschriftung) erscheint während des Folienübergangs im Karussell von oben nach unten. Mein Ziel ist es, dass es in der Nähe bleibt. Ich habe die CSS auf dem Karussell geändert, aber irgendwann muss etwas durcheinander gebracht haben. Ich habe es noch nicht gefunden und meine letzte Zuflucht nach diesem Post ist es, von vorne zu beginnen! : D

Hinweis: Das Problem tritt nur bei einer Browserbreite von über 768 Pixel auf.

Sie können mein Problem hier anzeigen: http://wfsu.org/2016copy/education/ Ich legte einen transparenten Hintergrund auf. Carousel-Beschriftung, damit es einfacher ist, das Problem zu sehen. Das funktioniert aber auch, wenn Sie einen Hintergrund auf .item setzen.

Hier mein Karussell bezogenen CSS Änderungen für @media werden (min-width: 768px)

.carousel-caption { 
     position:absolute!important; 
     top: inherit!important; 
     background-color: rgba(0, 0, 0, 0.5); 
     bottom:0;/*was 20px*/ 
     padding-top:0!important;/*was 20px*/ 
     padding-bottom:10px;/*was 30px*/ 
     padding-right:inherit!important; 
     padding-left:inherit!important; 
     right:0!important;/*was 20%*/ 
     left:0!important;/*was 20%*/ 
     background: inherit; 
     border-bottom: 17px solid $accent-green; 
    } 

Änderungen CSS für unter 768 Pixel Karussell

/*carousel*/ 
.carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right, .carousel-control .icon-next, .carousel-control .icon-prev { 
    position: absolute; 
    top: 50%; 
    z-index: 5; 
    display: inline-block; 
    margin-top: -10px; 
} 

.carousel-caption { 
    position: relative; 
    left: auto; 
    right: auto; 
    background:$primary-green; 
    border-bottom: 17px solid $accent-green; 
    padding-top:1px; 
    padding-right:10px; 
    padding-left:10px; 
    top: 0; 

} 
.carousel-control.left, .carousel-control.right { 
    background-image: none!important; 
} 
.carousel-indicators { 
    bottom:-15px;/*was 20px*/ 
} 

Danke

Antwort

0

I habe es herausgefunden ... vielleicht wird das jemandem in der Zukunft helfen.

Auf den .carousel-Titelvorlagen für @media (min-width: 768px) habe ich oben geändert: inherit! Wichtig; nach oben: auto! wichtig. Scheint funktioniert zu haben, aber ich verstehe den Unterschied zwischen den Werten von inherit und auto jetzt nicht mehr.