引导轮播标题链接不起作用答案

【问题标题】：Boostrap Carousel caption link not working引导轮播标题链接不起作用
【发布时间】：2015-07-09 23:38:19
【问题描述】：

我发现了一个类似的问题（由 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>

链接的样式实际上正确显示在页面上，但链接不可点击。任何帮助表示赞赏！

【问题讨论】：

标签： twitter-bootstrap hyperlink carousel

【解决方案1】：

她的一个基本示例说明了如何在 Bootstrap 轮播中叠加文本/链接。

<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;
}

【讨论】：

似乎这正是我所拥有的，除了我有的地方，你有
... 我也尝试过，并且得到了相同的结果。
你真的尝试过我提供的代码还是只是看看它？
是的，正如我上面提到的，“我也尝试过”。 ;) 我最初尝试过 div 标签，认为它实际上是正确的语法。这不起作用（对我来说），所以我环顾四周，发现有人（我相信在 SO 上），他建议使用标签代替，说如果 Boostrap 的轮播不读取链接，如果它们在里面标签。不确定这是否是事实，但根据我目前的经验，这似乎是真的。

【解决方案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”解决了问题，然后我最终完全删除了该样式。

非常感谢您的帮助！

【讨论】：