Bootstrap 轮播字幕重叠文本

Question

我正在尝试创建一个包含动画字幕的 bootstrap 轮播。我的问题是标题的文字重叠。只有当我将屏幕分辨率设置为 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 
  {
  font-size: 21px;
  }
     .banner-text-bg 
  {
     font-size: 25px;
  }
}

.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

尝试为 class "carousel-caption" 和 "banner-text" 添加“line-height:initial”或“line-height:inherit”。

这将使您的文本行高在响应式视图中保持稳定。

Bootstrap 轮播字幕重叠文本

Bootstrap carousel caption overlapping text

css

twitter-bootstrap

carousel

bootstrap-carousel