引导轮播没有调整文本大小答案

【问题标题】：Boostrap carousel is not resizing text引导轮播没有调整文本大小
【发布时间】：2014-10-24 20:37:01
【问题描述】：

我正在使用带有 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;
      }
}

但它没有帮助。

【问题讨论】：

你可以试试this JQuery plugin。我最喜欢的之一。 . .
哇！一定会试试的！

标签： html css twitter-bootstrap flat

【解决方案1】：

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

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

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

【讨论】：

不错！这实际上是在调整我的内容的大小，我也有这样的想法：当网站调整到移动屏幕时，文本会消失并只显示按钮，用户可以单击并阅读另一个页面上的信息，这可能吗？
是的。您可以使用与查询相同的方法，并使用 visibility:hidden;在要隐藏的元素上。然后一个技巧是创建另一个
来存储应该在较小屏幕上可见的按钮。然后，您将再次使用您的媒体查询来显示：可见；在那个#button-wrap 上。有意义吗？
是的！当然，让它工作，但现在我处理按钮没有调整大小：D 可怕
好的！伙计们！让它像我想要的那样工作！感谢您的大力帮助和指导！ :)
呵呵欢迎来到调整大小的世界 :) 不用担心 - 很高兴它成功了！

【解决方案2】：

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

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

【讨论】：