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 - 圖像上的字形

回答

相關問題