부트 스트랩 슬라이더 캡션 크기 조정

Question

전체 슬라이더 테마를 사용하고 있습니다. here입니다. 어떤 이유로 나는 텍스트를 사용하여 장치를 기준으로 크기를 조정하지 않습니다. 모바일에서 볼 때 약 3 글자가 전체 화면을 차지합니다. 저는 H1과 H2를 사용하고 있습니다 (아래 스 니펫 참조). 정상적인 화면에서는 괜찮아 보입니다. 나는 많은 검색을했는데 'class = "container-fluid"및/또는 class = "row-fluid"를 사용해야하는 것 같습니다. 내가 이것을 시도하면 슬라이드가 비어있게됩니다. full-slider.css에서 새 스타일을 정의해야하는지 또는 내가 잘못했거나 의도 된 동작인지 여부가 궁금합니다. 상관 통찰력

---

샘플

---

<div id="myCarousel" class="carousel slide"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
       <li data-target="#myCarousel" data-slide-to="3"></li> 
       <li data-target="#myCarousel" data-slide-to="4"></li> 
       <li data-target="#myCarousel" data-slide-to="5"></li> 
       <li data-target="#myCarousel" data-slide-to="6"></li> 
       <li data-target="#myCarousel" data-slide-to="7"></li> 
      </ol> 



      <!-- Wrapper for Slides --> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <!-- Set the first background image using inline CSS below. --> 
        <div class="carousel-caption"> 
         <h1 id="type">{{ scores.content.description }}</h1> 
         <h2 class="text-justify">{{ scores.content.general_description }}</h2></br> 

         <h2 style="text-align: center">Social Media.</h2> 

         <div style="text-align: center"> 
          <a href="" target="_blank" class="btn btn-social-icon btn-linkedin"> 
           <i class="fa fa-linkedin"></i> </a> 

          <a href="" target="_blank" class="btn btn-social-icon btn-twitter"> 
           <i class="fa fa-twitter"></i> </a> 
         </div></br> 
         <div style="text-align: center"> 
          <a href="" style="color:white" target="_blank">Link 1</a> | 
          <a href="" style="color:white" target="_blank">Link 2</a> 
         </div> 
        </div> 
       </div> 

Answer 1

은 H1과 H2가 이후 못해 그 자체의 크기를 조정 .... 이해 될 것이다. 그래서 그들을 조작하는 사용자 지정 스타일을 사용 (유용한 솔루션이 될 것입니다 미디어 쿼리를 사용.)이 같은

뭔가를 -.

@media (max-width:767px) 
{ 
    .carousel-caption> h1 
    { 
     font-size: 16px; 
    } 
    .carousel-caption> h2 
    { 
     font-size: 14px; 
    } 
}