Boostrap 회전식 메뉴의 텍스트 크기가 조절되지 않습니다.

Question

Flat UI 프레임 워크와 함께 부트 스트랩을 사용하고 있으며 회전식 메뉴에 문제가 있습니다. 내가 responsiView를 통해 내 사이트를 검사 할 때의 반응, 이미지 자체가 크기를 조정하는 경우,

<section> 
<!-- slider obrázků--> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- tečky které identifikují pořadí--> 
    <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> 
    </ol> 
    <!-- první slide--> 
    <div class="carousel-inner"> 
     <div class="item active">  
     <img src="img/ZemOlymp4.JPG" class="img-responsive"> 
      <div class="carousel-caption"> 
      <!--text vypsaný uvnitř obrázku--> 
       <h3>Vítězství v celostátní zemědělské soutěži</h3> 
       <p>Jakub Procinger, student 3. ročníku agropodnikání na Městské střední odborné škole v Kloboukách u Brna, získal první místo na zemědělské olympiádě v Českých Budějovicích</p> 
       <button class="btn btn-embossed btn-primary">Číst dále</button> 
      </div> 
     </div> 
     <!-- druhý slide --> 
     <div class="item"> 
      <img src="img/DSC_0304.JPG" class="img-responsive"> 
      <div class="carousel-caption"> 
       <!-- text vypsaný uvnitř obrázku--> 
       <h3>Školní výlet do Anglie</h3> 
       <p></p> 
      </div> 
     </div> 
     <!-- třetí slide--> 
     <div class="item"> 
      <img src="img/DSC_0558.JPG" class="img-responsive"> 
      <div class="carousel-caption"> 
       <!--text vypsaný uvnitř obrázku--> 
       <h3>Školní výlet do Anglie</h3> 
       <p>Londýnské oko/London's Eye</p> 
      </div> 
     </div> 
    </div> 
    <!-- navigace slideru--> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
    </a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
    </a> 
</section> 

하지만, 텍스트 내부에 여전히 큰 :

나는 같은 내 회전 목마 코드가 있습니다.

이 나는 ​​시도했다 :

@media (max-width: 767px) { 
    .carousel h3 { 
     font-size: 30px; 
     } 
} 

하지만 도움이되지 않았다.

Answer 1

저는 부트 스트랩이 이미 글꼴 크기가 무엇인지 생각해 냈다고 생각합니다. 부트 스트랩은 인라인 스타일에 jQuery/javascript를 사용하기 때문에 미디어 쿼리가 요소에 "가까이"있으므로 우선 순위가 높습니다.

h3 요소를 마우스 오른쪽 버튼으로 클릭하고 chrome/firefox로 "inspect element"를 선택하여 boostrap 스타일이있는 위치를 찾고 (.css 파일에서 수동으로 편집 할 수 있습니다.) 또는 단순히! 자신의 스타일에 중요한 요소 :

@media (max-width: 767px) { 
    .carousel h3 { 
     font-size: 30px !important; 
     } 
} 

Answer 2

JQuery를 사용하지 않는 한 텍스트의 크기를 동적으로 조정할 수있는 방법이 없습니다. 미디어 쿼리는 작동하지만 다음과 같이 작성하십시오.

@media only screen and (max-width: 767px) { 
    h3.carousel { 
     font-size: 30px !important; 
     } 
}