twitter-bootstrap 如何使整个引导程序缩略图可点击（适用于手机和平板电脑）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24276367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an entire bootstrap thumbnail clickable (for mobile and tablet)
提问by saicode
Using Bootstrap3, I am trying to make a page with few thumbnails leading to different links. I have figured out how to make hover effect with text and link but now I am confused how it can be used with mobile and tablet as there is no hover for those.
使用 Bootstrap3，我试图制作一个页面，其中的缩略图很少指向不同的链接。我已经想出了如何使用文本和链接制作悬停效果，但现在我很困惑如何将其与手机和平板电脑一起使用，因为它们没有悬停。
I am wondering how to make the entire thumbnail clickable? and is it a good idea to make it so?
我想知道如何使整个缩略图可点击？这样做是个好主意吗？
Here is a bootply link for you to see what I mean http://www.bootply.com/OuUBXv4ope
这是一个 bootply 链接，您可以了解我的意思 http://www.bootply.com/OuUBXv4ope
回答by AyB
Making the entire thumbnail clickable is a good idea in terms of user accessibility and in fact, easy to make.
就用户可访问性而言，使整个缩略图可点击是一个好主意，而且实际上很容易制作。
According to your code:
根据您的代码：
<div class="col-sm-4">
<div class="thumbnail">
<!-- Place the anchor tag here to cover both your caption and image -->
<a href="#" class="">
<div class="caption">
<h4 class="">Thumbnail Headline</h4>
<p class="">Lorem ipsum dolor
</p>
</div>
<img src="http://lorempixel.com/400/300/technics/1/" alt="..." class="">
</a>
<!-- Anchor tag ends covering both image and caption -->
</div>
</div>
DEMO(The first 3 thumbnails)
演示（前 3 个缩略图）
