Bootstrap旋转木马标题没有响应

我有一个引导旋转木马，看起来很好，当屏幕是全宽，但是当我调整它的大小时，文本超出了旋转木马，并没有调整大小。这里的CSS我有传送带：Bootstrap旋转木马标题没有响应

.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>

来源

2014-11-24 Mia

所以我现在所拥有的是这样的后：http://prntscr.com/59j06c，我会喜欢在调整大小时将所有标题保留在旋转木马的内部。 – Mia 2014-11-24 02:50:41

嗨米娅，看这个例子 - > http://bootsnipp.com/maridlcrmn/snippets/3xGko – 2014-11-25 17:30:49

使用Twitter的引导这里响应公用事业是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>

来源

2014-11-24 04:24:37

Bootstrap旋转木马标题没有响应

回答

相关问题