html - Twitter-Bootstrap:缩略图标题中的文本下划线

Question

使用 Bootstrap 我想制作一个 http://spring.io/projects 的副本;一个链接网格，每个链接都是一个带边框的面板(可能不是正确的词......)，里面有一些文字和一张图片。我得出的结论是，Bootstrap 的 Thumbnail组件应该适合我。

然而，在尝试使用它时，我遇到了一个问题。

如果我希望整个面板都是可点击的，我必须将 thumbnail 类应用于 anchor 标记(将 anchor 包装到带有 thumbnail 的 div 中不会似乎工作)。然后，在 anchor 标记内，我有一个 div 标记，其中包含 caption 类，用于存储一些我不想在将鼠标悬停在控制板。

这是什么原因造成的:文本恢复正常颜色(与不使用 caption 类时的链接颜色相比，但是将鼠标悬停在面板上会导致文本带有下划线，我'如果不是这样，我会更喜欢:它看起来不太好，悬停时边框的高亮已经很好地表明它确实是一个链接。

我正要拿出我的 css 帽子并修改 caption 类以不这样做，但这似乎不是正确的做法；我无法想象像这样突出显示字幕是可取的行为，并且我想使用尽可能少的自定义代码(因为坚持标准意味着我不必在每次更新 Bootstrap 时都维护此代码).

所以我的问题是:我哪里出错了？希望整个缩略图面板作为链接工作实际上是不好的做法吗？还是我应该继续手动刮掉下划线？或者我可能将错误的类应用于错误的标签？还是缩略图组件不适合我在这种情况下完全使用？

编辑:

忘记包含代码。

我目前正在使用的东西:

<a class="thumbnail text-center" href="#">
    <div class="caption">
        <h3>Potato</h3>
        <p>Some short description of what this exact potato really is about.</p>
    </div>
</a>

编辑 2:

添加当前发生的图像:

这是鼠标悬停在上面；如您所见，文本带有下划线，这并不理想。

Answer 1

你问这个问题真的很奇怪，因为不久前我刚刚读到一个线程并且仍然有我的解决方案，我已经变成了 FIDDLE给你。

如果我对你的问题理解正确，你希望整个面板/div 成为一个链接，这可以这样完成:(这是 OP 的步骤，不能逐字记住它们)

1. 制作你的 Div position: Relative;
2. 创建一个链接<a href="#"></a>
3. 将 span 标签放入该链接 <span></span>
4. 用
设置空 span 标签的样式

CSS:

{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  /* edit: added z-index */
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}  

我想这就是它的全部。就像我说的...这上面有一个线程，但我不记得它叫什么了。

希望对您有所帮助。

编辑: 经过长时间的辩论，我们可以忘记上面的内容并且我们得出的结论是这可能就是您所追求的？ :)

在您的解决方案中再添加一点点 CSS，您就完成了排序...

a.thumbnail:link {
text-decoration:none;
cursor:pointer;
}

这是更新的 fiddle