Boostrap carousel не изменяет размер текста

Question

Я использую Bootstrap с плоским интерфейсом UI, и я столкнулся с проблемой с Carousel.

У меня есть код карусельного как:

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

Когда я проверить мой сайт с помощью responsiView, если его отзывчивым, само изображение изменяет размер, но текст внутри по-прежнему велик.

Я пробовал:

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

, но это не помогло.

Answer 1

Я считаю, самонастройки уже получил представление о том, что ваш размер шрифта должен быть. Поскольку bootstrap использует jQuery/javascript для встроенного стиля, он переопределяет ваш медиа-запрос, поскольку он «ближе» к вашему элементу и, следовательно, имеет более высокий приоритет.

Либо вы можете щелкнуть правой кнопкой мыши по элементу h3 и выбрать «проверять элемент» с помощью chrome/firefox, чтобы найти, где находится стиль 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; 
     } 
}