Question

我使用Bootstrap和Flat 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

除非您使用JQuery，否则无法动态调整文本大小。媒体查询将起作用，但写如下：

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

Answer 2

我相信bootstrap已经知道你的字体大小应该是什么。由于bootstrap使用jQuery / javascript进行内联样式，因此它会覆盖您的媒体查询，因为它更接近＆＃34;对你的元素，因此更高的优先级。

您可以右键单击h3元素并选择＆＃34;检查元素＆＃34;使用chrome / firefox查找放置了boostrap样式的位置（并在.css文件中手动编辑），或者只需在样式中添加！important：

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

Bootstrap轮播没有调整文本大小

2 个答案: