twitter-bootstrap - 如何使整个 Bootstrap 缩略图可点击(适用于手机和平板电脑)

Question

使用 Bootstrap3，我正在尝试制作一个带有少量缩略图的页面，这些缩略图导致不同的链接。
我已经想出了如何使用文本和链接制作悬停效果，但现在我很困惑如何将它与手机和平板电脑一起使用，因为它们没有悬停。

我想知道如何使整个缩略图可点击？
这样做是个好主意吗？

这是一个 Bootstrap 链接，您可以了解我的意思
http://www.bootply.com/OuUBXv4ope

Answer 1

就用户可访问性而言，使整个缩略图可点击是一个好主意，而且实际上很容易制作。

根据您的代码:

<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 (前 3 个缩略图)