如何將鏈接限制爲只有div而不是Bootstrap列？

Question

我有這個div與一類.win_box：

該div被引導列包圍。該鏈接允許用戶允許整個Bootstrap列自身的鏈接。我只希望用戶能夠訪問實際的div本身的鏈接。我該怎麼做呢？

.win_box { 
 
     position: relative; 
 
     left: -12px; 
 
     height: 110px; 
 
     width: 196px; 
 
     background: #353535; 
 
    }

<div class="col-xs-6 col-sm-6 col-md-2 col-lg-g" id='title'> 
 
     <a href='#'> <div class='win_box'> <i class="fa fa-play" aria-hidden="true" id='video'></i> </div> </a> 
 
</div>

Answer 1

添加

顯示：內聯塊;

到.win_box類，你很好去。

.win_box { 
     position: relative; 
     left: -12px; 
     height: 110px; 
     width: 196px; 
     background: #353535; 
     display:inline-block; 
    } 

，你是好去

Answer 2

您可以使用display: inline-block;

.win_box { 
 
     position: relative; 
 
     left: -12px; 
 
     height: 110px; 
 
     width: 196px; 
 
     background: #353535; 
 
     display: inline-block; 
 
    }

<div class="col-xs-6 col-sm-6 col-md-2 col-lg-g" id='title'> 
 
    <div class='win_box' onClick="window.location='https://google.com';" > <i class="fa fa-play" aria-hidden="true" id='video'></i> </div> </a> 
 
</div>

另一種選擇是使用JS用於鏈接做到這一點。 onclick="location.href='www.google.com'"

<div class="col-xs-6 col-sm-6 col-md-2 col-lg-g" id='title'> 
     <div class='win_box' onclick="location.href='www.google.com'"> <i class="fa fa-play" aria-hidden="true" id='video'></i> </div> 
</div> 

小提琴 - https://jsfiddle.net/6n2bpep4/2/