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

Question

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

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

在下面使用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');
      }
   });
     });

Answer 2

试试这个：

只需删除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进行中心对齐