html - Bootstrap 轮播不调整文本大小

Question

我在 Flat UI 框架中使用 Bootstrap，我遇到了 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 已经知道您的字体大小应该是多少。由于 bootstrap 使用 jQuery/javascript 进行内联样式设置，因此它会覆盖您的媒体查询，因为它“更接近”您的元素，因此具有更高的优先级。

要么您可以右键单击 h3 元素并使用 chrome/firefox 选择“检查元素”以查找放置 boostrap 样式的位置(并在 .css 文件中手动编辑它)，或者您可以简单地添加一个 !important适合你的风格:

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