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旋轉木馬標題沒有響應

回答

相關問題