按鈕響應問題引導程序

Question

我一直在掙扎幾天，以使用Twitter引導將響應圖像上的按鈕。我想獲得的圖像上的按鈕，如下所示： http://photostand.co.za/images/9h1s1sci8ba9mnymt2e3.gif

然而，按鈕被放置在網格列的邊緣： http://photostand.co.za/images/qeji7svio531p97dcsp2.gif

這是我的代碼：

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
<div class="col-sm-3"> 
 
    <div class="center-block" style="max-width:100px;display:relative"> <!-- image width is 100px --> 
 
     <img class="img-responsive center-block" src="http://lorempixel.com/100/300/" alt="Random Image"> 
 
     <button type="button" class="btn btn-default" style="position:absolute;top:0px;right:0px"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span></button> 
 
    </div> 
 
</div> 
 
<div class="col-sm-3"> 
 
     <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div> 
 
</div><!--/row-->

我相信答案很簡單，但我不會來。提前致謝。

Answer 1

父塊應該是position: relative不display: relative