Bootstrap 3 - 图像上的字形

我正在试图用bootstrap3制作缩略图。Bootstrap 3 - 图像上的字形

我怎样才能让这一点，我的意思是把这个放大glyphicon在形象呢？（对不起，涂装车间：d）

Desired:

其实，我有这样的：

enter image description here

用下面的代码：

<div class="thumbnail PNET-thumbcolor"> 
<div class="PNET-cursor-hand center-block text-center"> 
    <img data-src="holder.js/140x140" alt="Producto"> 
    <span class="glyphicon glyphicon-zoom-in"></span> 
    </div> 
    <div class="caption">... 
    </div> 
</div>

有没有办法让这个只与CSS，而不触及引导样式？

在此先感谢！请发表评论或询问您是否需要更多信息和/或改善！ :)

UPDATE：

的jsfiddle：http://jsfiddle.net/Leandro1981/AKwb4/1/

来源

2014-04-09 Leandro Tupone

请提供的jsfiddle，所以我们可以尝试在你的代码。 :-) –

@LucaDetomi谢谢！我做到了，我必须导入holder.js库，但是有！（我在小提琴工作） –

我没有看到灰色的框....但只有一个蓝色的条... –

我仅编辑CSS，添加相对于镜头图标的位置，并且一个固定的宽度设定为容器。

.PNET-cursor-hand 
{ 
    width:140px; 
} 

.PNET-thumbcolor .glyphicon-zoom-in 
{ 
    position:relative; 
    top:-20px; 
    right:5px; 
    text-align:right; 
    display:block; 
}

这里demo

来源

2014-04-09 19:02:11

完美！你明白了：D我打破了我的大脑，试图让容器漂浮并修复图标。 forza azurra！：d –

Bootstrap 3 - 图像上的字形

回答

相关问题