如何使整个引导程序缩略图可点击（适用于手机和平板电脑）

Posted 2023-05-08

【中文标题】如何使整个引导程序缩略图可点击（适用于手机和平板电脑）

【英文标题】：How to make an entire bootstrap thumbnail clickable (for mobile and tablet)

【发布时间】：2014-08-08 04:58:00

【问题描述】：

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

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

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

【问题讨论】：

我在手机上试过这个，当你点击图片时会出现悬停效果，所以我认为你不必担心这个。但是，如果我可以说，有些人可能很难点击微小的open 按钮，所以我建议你可以在中间放一个更大的图标，比如this。

感谢您的回复钦马亚德。那个打开的按钮只是一个占位符，我本来可以做得更大的。但现在我正在考虑让整个缩略图可点击（例如 enlisteddesign.com/our-work ）。谁能建议我可以在 Bootstrap 中实现这一目标？

【参考方案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/"  class="">
        </a>
        <!-- Anchor tag ends covering both image and caption -->
    </div>
</div>

DEMO （前 3 个缩略图）

【讨论】：

谢谢你，我可以拥有 Kittenz！我现在就试试，很快就会回来。 （抱歉在之前的评论中没有提到你的名字，因为我以为是别人）

试过了。它正在工作！ :) 再次感谢“我可以拥有小猫”！

在 Bootstrap 4 上也像魅力一样工作 :-)