我的轮播中的 <a> 标记在引导程序中显示死链接答案

【问题标题】：the <a> tag in my carousel is showing dead link in bootstrap我的轮播中的 <a> 标记在引导程序中显示死链接
【发布时间】：2014-01-14 22:23:36
【问题描述】：

我的轮播中的锚标记显示死链接。即不能悬停在它上面。其他一切正常。但该链接在 div 内不起作用。我已经使用了引导程序中的所有文件，并且没有对脚本进行任何更改。

HTML：

<div class="carousel-inner">
    <div class="item active">
        <div class="fill" style="background-image:url('images/slide1.jpg'); background-size:cover;"></div>
        <div class="carousel-caption">
        <h1>Caption 1</h1>
        <p></p>
        <a href="#" class="read">Read More &raquo;</a>
        <br/>
        <div class="tech">
            <img src="images/tech.png" />
        </div>
    </div>
</div>
<div class="item">
    <div class="fill" style="background-image:url('images/slide2.jpg'); background-size:cover;"></div>
    <div class="carousel-caption">
        <h1>Caption 2</h1>
        <p></p>
    </div>
</div>
<div class="item">
    <div class="fill" style="background-image:url('images/slide3.jpg'); background-size:cover;"></div>
        <div class="carousel-caption">
            <h1>Caption 3</h1>
        </div>
    </div>
</div>

【问题讨论】：

您第二次发布您的问题...
请不要多次发布问题。如果第一个帖子被否决，请先尝试对其进行编辑。发布相同的内容会有相同的结果。
也就是说，我相信这个问题比原来的质量更高。
我是 stackoverflow 的新手，对编辑帖子没有太多想法。我意识到问题本身有很多错误，并且在我之前的问题中没有足够的解释。这就是我再次发布此内容的原因
那么你的问题是什么？ ..请编辑您的问题

标签： css twitter-bootstrap

【解决方案1】：

在提供给 patel.milanb 的答案的 cmets 中，作者指出了他的问题的一个活生生的例子：http://itechnepal.com/new_site//

问题：包含轮播指示符的<ol> 与链接重叠，因此无法点击。

从.carousel-indicators 中删除bottom: 10px; 将解决此问题。

CSS：

.carousel-indicators {
    position: absolute;
    /*bottom: 10px; <- remove this*/
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}

【讨论】：

【解决方案2】：

从你的问题中我可以理解。

link is not working inside DIV

我会说你没有提供任何指向你的<a>标签的链接

<a href="#" class="read">

替换为：

<a href="http://www.google.com/" class="read">

更新：从 css 中删除您的样式

.carousel-indicators {
   top: 180px;
}

look into bootstrap.css line no: 6590

或从课程.carousel-indicatorsLine no: 6523中删除bottom: 10px;

【讨论】：

我也试过了。问题是我无法将鼠标悬停在阅读更多链接上。你可以在itechnepal.com/new_site 上看到它。 “阅读更多”链接无效
你是什么意思我不能将鼠标悬停在链接上...你能在你的页面上看到阅读更多...
@user3139019 这是因为<ol class=carousel-indicators> 与链接重叠。如果删除它，链接将按预期工作。从.carousel-indicators 中删除bottom: 10px; 以解决此问题。