Twitter-Bootstrap：縮略圖標題中的文字下劃線

使用引導程序我想複製一個http://spring.io/projects;一個網格的鏈接，每個邊框面板（可能不是正確的單詞......），裏面有一些文字和圖片。我已經得出結論，Bootstrap的Thumbnail組件應該適合我。Twitter-Bootstrap：縮略圖標題中的文字下劃線

然而，試圖使用它，我遇到了一個問題。

如果我希望整個面板都是可點擊的，我必須將thumbnail類應用到一個定位標記（將定位點包裝到與thumbnail似乎不起作用的div中）。然後，在錨標籤內部，我有一個div標籤，其中類用於存儲某些文本，其樣式我不想在面板上懸停時更改。

這是什麼引起的：文本恢復了正常的顏色（與沒有使用caption類時的鏈接顏色相比，但是懸停在面板上導致文本加下劃線，而且我更喜歡如果那不是案例：它看起來不太好，邊框懸停的亮點已經是一個很好的指示器，它確實是一個鏈接。

我剛剛拿出我的css帽子並修改了caption類不這樣做，但它看起來不是正確的行爲方式;我無法想象它是像這樣突出顯示標題的理想行爲，並且我想盡可能使用盡可能少的自定義代碼（因爲堅持標準意味着我不必每T都維護這些代碼ime我更新bootstrap）。

所以我的問題是：我哪裏錯了？想讓整個縮略圖面板作爲鏈接工作實際上是不好的做法嗎？或者我應該繼續並手動刮掉底線？或者，我可能將錯誤的類應用於錯誤的標籤？或者縮略圖組件不是我在這種情況下完全使用的正確組件？

編輯：

忘了包括代碼。

目前我使用的東西：

<a class="thumbnail text-center" href="#"> 
    <div class="caption"> 
     <h3>Potato</h3> 
     <p>Some short description of what this exact potato really is about.</p> 
    </div> 
</a>

編輯2：

添加的什麼是目前發生的圖像：

這是鼠標懸停超過它;正如你所看到的那樣，文本被加下劃線，這並不理想。

來源

2014-04-22 WiseTree

沒有看到你的實際標記很難說什麼，但至少你有一個計劃B是使用javascript或J詢問您是否不介意讓整個div /縮略圖可點擊。 – Godinall

我不會使用Jquery或Javascript來完成鏈接。我的方法即將在答案部分提到... – Mike

@Godinall我實際上希望整個縮略圖可點擊;我基本上希望整個事情成爲一個鏈接，但我不希望縮略圖的標題中的文本被作爲鏈接的樣式（因爲它是一個標題，我認爲它不合理） – WiseTree

真的很奇怪，你問這個問題，因爲我剛剛在不久前讀過這個話題，並且仍然有我的解決方案，我已經變成了FIDDLE給你。

如果我正確理解你的問題，你想整個面板/ DIV是一個鏈接，可以這樣來完成：（這是OP的步驟，不能記住他們一字）

讓你的事業部position: Relative;
創建一個鏈接<a href="#"></a>
放span標籤進入該鏈接<span></span>
風格與

012空span標記

CSS：

{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left: 0; 

    /* edit: added z-index */ 
    z-index: 1; 

    /* edit: fixes overlap error in IE7/8, 
    make sure you have an empty gif */ 
    background-image: url('empty.gif'); 
}

我想這是所有有給它。就像我說的...這裏有一個線程，但我不記得它叫什麼。

希望這可以幫助。

編輯：經過長時間的辯論，我們可以忘記上述情況，並且我們得出這樣的結論：這可能就是您所追求的結果嗎？ :)

添加更多一點點的CSS 您的解決方案，你的排序...

a.thumbnail:link { 
text-decoration:none; 
cursor:pointer; 
}

這裏是一個更新的fiddle

來源

2014-04-22 15:05:15 Mike

所以，如果我明白這是正確的，那麼背後的想法是，你把一個看不見的圖像作爲鏈接的背景，然後改變它的位置來佔領entiry div並把它帶到前面，這是正確的嗎？它似乎不是一個非常優雅的解決方案; bootstrap的最大優點之一是易於更改佈局並依靠bootstrap來確定組件的大小等，並且似乎這會在嘗試維護不同大小的視口時導致維護頭痛。 – WiseTree

@DomasPoliakas，我設法找到其他線程（http://stackoverflow.com/questions/796087/make-a-div-into-a-link）..我認爲這是最優雅的解決方案之一，你會根據OP找到。我認爲背景圖片只是一個IE修補程序。此外，這允許DIV內的其他鏈接同時進行。無論如何，使用它或不使用它，我只是以爲我會與你分享:)觸及可維護性，你添加的'span'標籤使用'％'，所以這應該調整任何Bootstrap的大小。 – Mike

增加了一個鏈接到div與一個單獨的鏈接 - 多酷:) http://jsfiddle.net/aqKn5/12/ – Mike

的解決辦法是在頂部添加樣式表：

a:hover { 
     text-decoration: none; 
    }

來源

2017-01-22 16:41:18

Twitter-Bootstrap：縮略圖標題中的文字下劃線

回答

相關問題