Question

我有一个自动旋转木马，当屏幕处于全宽时看起来很好，但是当我调整大小时，文本会转到旋转木马之外并且不会调整大小。这是我对旋转木马的CSS：

.carousel-caption {
    display: inline-block;
    top:0;
    left: 0; 
    padding-left: 5%; 
    padding-top: 5%; 
    bottom: auto; 
    text-align: left;

}
.slider-head{
    font-family: MuseoBold; 
    color: white; 

}
.slider-sub{
    font-family: MuseoLight; 
    color: white;
}
.carousel-control.left, .carousel-control.right {
    background-image: none
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
display: block;
height: auto;
line-height: 1;
width: 100%; 
}

以下是HTML：

<div class="carousel slide" id="carousel-245170">
        <ol class="carousel-indicators">
          <li class="active" data-slide-to="0" data-target="#carousel-245170">
          </li>
          <li data-slide-to="1" data-target="#carousel-245170">
          </li>
          <li data-slide-to="2" data-target="#carousel-245170">
          </li>
        </ol>
        <div class="carousel-inner">


          <div class="item active">
            <img class="img-responsive hero-imgs" alt="" src="img/slider_1.png">
            <div class="carousel-caption">
              <h3 class="slider-head">
                Experience<br>Merit Professional<br> Learning Courses
              </h3>
              <p class="slider-sub">
                Delve into your passion with a Professional<br>
                Learning course! We now offer discounted <br>
                courses to our valued marketing partners.<br>
              </p>
            </div>
          </div>


          <div class="item">
            <img class="img-responsive hero-imgs" alt="" src="img/slider_2.png">
            <div class="carousel-caption">
              <h3 class="slider-head">
                Upcoming Events<br>
              </h3>
              <h4 class="slider-sub">
                Bring-Your-Own-Device<br>A Summit for Decision Makers
              </h4>
              <p class="slider-sub">
                Featuring presentations and panel discussions on<br>crutial aspects of BYOD: mobility, user support,<br>data security, and more. 
              </p>
            </div>
          </div>


          <div class="item">
            <img class="img-responsive hero-imgs" alt="" src="img/slider_3.png">
            <div class="carousel-caption">
              <h3 class="slider-head">
                Upcoming Events<br>
              </h3>
              <h4 class="slider-sub">
                IT Project Management:<br>
                Fundamentals & <br>
                Practices
              </h4>
              <p class="slider-sub">
                Become an extraordinary leader. This course<br>
                will teach you the best practices of project
                management<br> and prepare you to be a game-
                changer at your company
              </p>
            </div>
      </div>
     </div>
    </div>
  </div>
</div>

Answer 1

这里使用twitter bootstrap响应实用程序是Link

并在主h3,h4,p

中添加以下课程

in h3 add visible-md visible-lg

in h4 add visible-md visible-lg

in p add visible-md visible-lg

字体大小取决于您可以根据需要更改它... 之后，在h3,h4 and p

之后添加此代码

<h4 class="slider-head visible-xs visible-sm col-xs-12 col-sm-12">
                Upcoming Events<br>
              </h3>
              <h5 class="slider-sub visible-xs visible-sm col-xs-12 col-sm-12">
                IT Project Management:<br>
                Fundamentals & <br>
                Practices
              </h4>
              <p class="slider-sub visible-xs visible-sm col-xs-12 col-sm-12">
                Become an extraordinary leader. This course<br>
                will teach you the best practices of project
                management<br> and prepare you to be a game-
                changer at your company

</p>

Bootstrap Carousel标题不响应

1 个答案: