twitter bootstrap - Boostrap Carousel标题链接不工作

Question

我发现了一个类似的问题(由OP回答)，但答案似乎不适合我。

我试图应用一个链接到Bootstrap旋转木马图像。这似乎是不可能的，所以我的下一个最佳选择是添加一个标题，并在那里放一个链接。这是我的代码:

           <div class="item" >
                <img src="images/carousel-main-vets.jpg" alt="Second slide">
                 <span class="carousel-caption row-fluid">
                <p>click  <a href="https://youtu.be/eXpmMRl-6Ks" target="_blank">here</a> to watch video</p> 
               </span>
              </div>

链接的样式实际上正确地显示在页面上，但链接不可点击。任何帮助都是感激的!

Answer 1

这是一个如何在Bootstrap carousel中覆盖文本/链接的基本示例。

<div class="container">
<div class="row">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/1500x500/3498db/2980b9" alt="First slide">
                <div class="carousel-caption">Click <a href="https://youtu.be/eXpmMRl-6Ks" target="_blank"> here</a> to watch</div>
            </div>
            <div class="item">
                <img src="http://placehold.it/1500x500/9b59b6/8e44ad" alt="Second slide">
                <div class="carousel-caption">Click <a href="https://youtu.be/eXpmMRl-6Ks" target="_blank"> here</a> to watch</div>
            </div>
            <div class="item">
                <img src="http://placehold.it/1500x500/34495e/2c3e50" alt="Third slide">
                <div class="carousel-caption">Click <a href="https://youtu.be/eXpmMRl-6Ks" target="_blank"> here</a> to watch</div>
            </div>
        </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
                    </span></a>
    </div>
</div>

CSS

.carousel-caption {
padding-bottom: 30px;
font-size: 20px;
}

Answer 2

感谢您的努力和发布的jsfiddle。我解决了问题。你的代码工作完美，问题是:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="position:relative;top:0px;z-index:-2">

将z-index值设置为-2会导致图像/标题"向后"更远，因此链接不起作用。从理论上讲，它前面没有任何东西"阻挡"链接，但它表现得好像有一样。将z-index更改为"1"解决了这个问题，然后我最终完全删除了样式。

非常感谢你的帮助!