Question

我一直在努力使用Twitter Bootstrap在响应式图像上放置一个按钮几天。我试图获取图像上的按钮如下： http://photostand.co.za/images/9h1s1sci8ba9mnymt2e3.gif

但是，按钮位于网格列的边缘： http://photostand.co.za/images/qeji7svio531p97dcsp2.gif

这是我的代码：

＆＃13;

<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-->

＆＃13;

我确定答案很简单，但我没有做对。提前谢谢。

Answer 1

父块应为position: relative而不是display: relative

使用Bootstrap按钮响应响应问题

1 个答案: