Question

以下代码创建超链接图像。

<div class="row" style="padding-top: 25px;">
    <div class="col-xs-12">
        <a href="http://www.aibd.org" target="_blank">
            <img src="/images/aibd_logo.png" class="img-responsive" style="padding: 5px; height: 125px; background-color: #ffffff; margin: 0 auto;" />
        </a>
    </div>
</div>

如您所见，div跨越所有12个Bootstrap列。图像包含在超链接中。我在图像上使用“img-responsive”类。 “margin：0 auto”使图像在列中居中。

问题在于：

当您将鼠标悬停在浏览器中的图像上时，您可以获得所需的“手指”光标。但是，如果将光标移离图像，向左或向右但仍在同一个Bootstrap行中，即使光标不在图像顶部，光标仍然会给出“手指”。如果单击，它将导航到链接页面。即使您不再悬停在图像上，它仍然会识别超链接。

如果您转到http://new.integriby.com并将鼠标悬停在页面底部的AIBD徽标上，则可以看到此行为。

这是Bootstrap中的错误吗？有谁知道解决这个问题？

Answer 1

另一种解决方案是在text-center上使用col-xs-12（实际上，在这种情况下，您不需要行和列，简单div就足够了）{{1} } class（如果考虑在指甲上显示，可以应用img-responsive。）。

Answer 2

这不是bootstrap中的错误，这是预期的行为。 img-responsive分配img display:block，这使它成为一个块元素。您可以指定图像display:inline-block;并删除边距：自动并获得相同的大小调整效果，而不必将其作为块元素。然后在div上设置text-align：center，使a。

居中

Answer 3

请检查插入内联CSS代码。使用style =＆＃34; cursor：default;＆＃34;对于链接和游标：指针;对于图像。

我希望你能看到解决方案。

＆＃13;

<div class="row" style="padding-top: 25px;">
    <div class="col-xs-12">
        <a href="http://www.aibd.org" target="_blank" style="cursor: default;">
            <img src="images/aibd_logo.png" class="img-responsive" style="cursor: pointer; padding: 5px; height: 125px; background-color: #ffffff; margin: 0 auto;" />
        </a>
    </div>
</div>

＆＃13;

Bootstrap img-responsive导致超链接跨越整个列

3 个答案: