ブートストラップカルーセルキャプションオーバーラップテキスト

Question

私は、アニメーションキャプションを含むブートストラップカルーセルを作成しようとしています。私の問題は、キャプションのテキストが重なっていることです。この問題は、画面解像度を1024x768以上に設定した場合にのみ発生します。ブラウザのサイズを小さくすると、キャプションは重複しません。どうすればこの問題を解決できますか？以下は私のコード Here the image to explain my problem And this is what it is look like when I resize the browser to become smaller

/*Carousel*/ 
 

 
/*For smaller screen*/ 
 
@media only screen and (max-width:900px) 
 
{ 
 
    .banner-text 
 
\t { 
 
\t \t font-size: 21px; 
 
\t } 
 
    .banner-text-bg 
 
\t { 
 
    \t \t font-size: 25px; 
 
\t } 
 
} 
 

 
.carousel-indicators { 
 
    bottom: 0px; 
 
} 
 
.item { 
 
    display: none; 
 
    position: relative; 
 
    height: 80%; 
 
    .transition(.5s ease-in-out left); 
 
} 
 
.banner-text { 
 
    color: #000; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 200; 
 
    font-style: normal; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    background: rgba(241, 186, 131, 0.5); 
 
    padding: 10px; 
 
} 
 
.banner-text-bg { 
 
    clear: both; 
 
    color: #000; 
 
    float: left; 
 
    font-size: 33px; 
 
    text-transform: uppercase; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 200; 
 
    font-style: normal; 
 
    background: rgba(255, 255, 255, 0.5); 
 
    padding: 10px; 
 
} 
 
.banner-text-wrap { 
 
    left: 0; 
 
    position: absolute; 
 
    top: 20%; 
 
    height: 20%; 
 
} 
 
.carousel-caption { 
 
    top: 0; 
 
} 
 
/* Animation delays */ 
 

 
.banner-text { 
 
    -webkit-animation-delay: 1s; 
 
    animation-delay: 1s; 
 
} 
 
.banner-text-bg { 
 
    -webkit-animation-delay: 2s; 
 
    animation-delay: 2s; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<!--Start Carousel--> 
 
<div id="carousel-example-generic" class="carousel slide carousel-fade"> 
 

 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 

 
    <!-- First slide --> 
 
    <div class="item active"> 
 
     <img src="pic/Taj--Banner4.png" alt="banner-img" height="auto" width="100%"> 
 
     <div class="carousel-caption"> 
 
     <span class="banner-text-wrap"> 
 
        <span class="banner-text bounceInRight animated" >Lorem ipsum dolor sit amet</span> 
 
     <span class="banner-text-bg bounceInLeft animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <!-- /.item --> 
 

 
    <!-- Second slide --> 
 
    <div class="item"> 
 
     <img src="pic/Taj--Banner3.png" alt="banner-img" height="auto" width="100%"> 
 
     <div class="carousel-caption"> 
 
     <span class="banner-text-wrap"> 
 
        <span class="banner-text bounceInRight animated">Lorem ipsum dolor sit amet</span> 
 
     <span class="banner-text-bg bounceInLeft animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <!-- /.item --> 
 

 
    <!-- Third slide --> 
 
    <div class="item"> 
 
     <img src="pic/Taj--Banner5.png" alt="banner-img" height="auto" width="100%"> 
 
     <div class="carousel-caption"> 
 
     <span class="banner-text-wrap"> 
 
        <span class="banner-text bounceInRight animated">Our Vision</span> 
 
     <span class="banner-text-bg bounceInLeft animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </span> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <!-- /.item --> 
 

 
    <!-- Fourth slide --> 
 
    <div class="item"> 
 
     <img src="pic/Taj--Banner6.png" alt="banner-img" height="auto" width="100%"> 
 
     <div class="carousel-caption"> 
 
     <span class="banner-text-wrap"> 
 
        <span class="banner-text bounceInRight animated">Our Mission</span> 
 
     <span class="banner-text-bg bounceInLeft animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <!-- /.item --> 
 
    </div> 
 
    <!-- /.carousel-inner --> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

Answer 1

クラスの "line-height:initial" または "line-height:inherit" "カルーセル・キャプション" を追加してみてくださいと "バナー・テキスト" です。

これは、応答するビューでテキスト行の高さが安定するようにします。