Div as Radio HTML5 CSS Bootstrap 3

Question

我想在引導程序3中使用單選按鈕作爲div。結果應該是：當用戶單擊div標記時，整個div標記將被突出顯示。 這裏是codepen鏈接：http://codepen.io/parthshah000/pen/pyRMdQ

<div class="row"> 
<div class="col-sm-3"> 
    <a href=""> 
     <img class="img-circle" src=" http://placehold.it/42x42" alt="" /> 
     <span>Title</span> 
     <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 
    </a> 
</div> 
<div class="col-sm-3"> 
    <a href=""> 
     <img class="img-circle" src=" http://placehold.it/42x42" alt="" /> 
     <span>Title</span> 
     <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 
    </a> 
</div> 
<div class="col-sm-3"> 
    <a href=""> 
     <img class="img-circle" src=" http://placehold.it/42x42" alt="" /> 
     <span>Title</span> 
     <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 
    </a> 
</div> 
<div class="col-sm-3"> 
    <a href=""> 
     <img class="img-circle" src=" http://placehold.it/42x42" alt="" /> 
     <span>Title</span> 
     <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4"> 
    </a> 
</div> 

Answer 1

只是交換你<a>標籤爲<label> S和給他們一個cursor: pointer。 Voilà，請參閱：http://codepen.io/anon/pen/LNxwXR

Answer 2

你的問題不完全清楚，所以我可能要推斷了一下。

如果你希望在一個特定的div任何地方點擊並在其激活單選按鈕，然後在<label ...>包裝你的投入和刪除錨點（<a>）標籤。這是假設你不希望這些單選按鈕鏈接到某個地方，但是目的是非常不清楚。

作爲一般規則，div只是一個html元素，它是一個空白的畫布，用於定義它的外觀和行爲。錨標籤在DOM上的功能上具有非常特定的作用。

這裏有一個編輯你的codepen與你想要知道的，我相信什麼： http://codepen.io/anon/pen/MyJNPd