如何在图像上叠加缩放图标并始终保持它们完美排列？

Question

这让我抓狂，因为我知道有办法做到这一点，我只是不知道如何做。这就是我所提出的复制问题的原因：

http://jsbin.com/yikuda

使用窗口宽度播放，看看会发生什么。我怎样才能让加号图标保持在正确的位置，即使图像每行堆叠一个而不是每行三个？

HTML：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <div class="product text-center">
        <img src="http://placehold.it/300x300">
        <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="product text-center">
        <img src="http://placehold.it/300x300">
        <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="product text-center">
        <img src="http://placehold.it/300x300">
        <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
      </div>
    </div>
  </div>
</div>

CSS：

.zoom-btn {
  font-size: 2rem;
  position: absolute;
  top: 5px;
  right: 45px;
}

Answer 1

DEMO：https://jsbin.com/vavabe/1

1. 您的绝对定位项目需要父级位置：relative。
2. 您的图片需要有.img-responsive课程，但如果您使用.container-fluid，它也必须非常大。我在此示例中使用了.container。
3. 图像周围的div（图标保持位置的元素）不是图像的大小，除非div是浮动的或内联块然后你需要调整，如果有必要的话（img宽度）调整最大宽度）。
4. 在大多数情况下，您不需要.col-X-12。使用的最后一个列类以下的任何内容都是100％。



<强> HTML：

  <div class="container">
     <div class="row product-row">
        <div class="col-md-4">
           <div class="product text-center">
              <img src="http://placehold.it/500" class="img-responsive">
              <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
           </div>
        </div>
        <div class="col-md-4">
           <div class="product text-center">
              <img src="http://placehold.it/500" class="img-responsive">
              <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
           </div>
        </div>
        <div class="col-md-4">
           <div class="product text-center">
              <img src="http://placehold.it/500" class="img-responsive">
              <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
           </div>
        </div>
     </div>
  </div>

<强> CSS

.product {
    position: relative
}
.zoom-btn {
    font-size: 2rem;
    position: absolute;
    top: 5px;
    right: 5px;
}
@media (max-width:991px) { 
    .product-row {
        text-align: center
    }
    .product {
        display: inline-block;
        clear: both;
        margin: 0 auto 10px;
    }
    .product img {
      width:100%;
    }
}

Answer 2

<div class="col-sm-12 col-md-4">
  <div class="product text-center">
      <div class="col-sm-9">
        <img src="http://placehold.it/300x300">
      </div>
      <div class="col-sm-3">
        <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
      </div>
  </div>
</div>

只需添加到col-md ...只要它等于12，你的首选是什么...也许col-md-8和col-md-4等于col-md-12