在旋转木马图像下方显示旋转木马标题

Question

如何在最大宽度为767px的旋转木马图像下方显示旋转木马标题？

HTML：

<div class="item active">
    <img src="img/3.jpg">
    <div class="carousel-caption">
        <h4><a href="#">news</a></h4>
        <p></p>
        <a class="label label-success" href="#" target="_blank">readmore</a>
    </div>
</div>

的CSS：

@media (max-width: 767px) {
    #myCarousel.carousel-caption{
    }
}

Answer 1

试试这个：

只需删除class="carousel-caption"

即可

<div class="item active">
    <img src="img/3.jpg">
    <div class="text-center">
        <h4><a href="#">news</a></h4>
        <p></p>
        <a class="label label-success" href="#" target="_blank">readmore</a>
    </div>
</div>

而不是carousel-caption我使用text-center进行中心对齐

Answer 2

下面使用jquery代码就足够了： '#myCarousel'是您的轮播的ID

 $(document).ready(function () {
    $(window).on('resize', function () {
    if (window.matchMedia('(max-width: 767px)').matches) {
      $("#myCarousel .item img").next().removeClass('carousel-caption').addClass('caption');     
       } 
        else {
        $("#myCarousel .item img").next().removeClass('caption').addClass('carousel-caption');
      }
   });
     });