css - 在轮播图片下方显示轮播标题

Question

如何在最大宽度为 767 像素的轮播图片下方显示轮播标题？

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>

我使用 text-center 代替 carousel-caption 居中对齐