Bootstrap : 在缩略图的右下角添加一个按钮链接答案

【问题标题】：Bootstrap : Add a button link in the bottom right corner of a thumbnailBootstrap : 在缩略图的右下角添加一个按钮链接
【发布时间】：2013-06-14 14:32:36
【问题描述】：

我想做这样的事情：

目前，我正在使用边距，但我确信有一些“干净”的方法可以做到这一点......： http://jsfiddle.net/vXMMA/445/

<ul class="media-grid">
  <li>
    <a href="#">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
    </a>
    <a href="#" class="btn" style="margin-left:-23px;margin-top:67px;">+</a>
  </li> 
  <li>
    <a href="#">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
    </a>
    <a href="#" class="btn" style="margin-left:-23px;margin-top:67px;">+</a>
  </li>       

</ul>

【问题讨论】：

标签： css twitter-bootstrap thumbnails

【解决方案1】：

这个怎么样

<ul class="media-grid">
  <li>
    <a href="#" style="position:relative;">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
        <button class="btn" style="position:absolute;bottom:5px;right:5px;margin:0;padding:5px 3px;">+</button>
    </a>
  </li> 
  <li>
    <a href="#" style="position:relative;">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
        <button class="btn" style="position:absolute;bottom:5px;right:5px;margin:0;padding:5px 3px;">+</button>
      </a>
  </li>
</ul>

http://jsfiddle.net/xKrXn/1/

【讨论】：

但这并不是真正的 Bootstrap 特定的，问题是，这不是真正的响应式，这是使用 Bootstrap 的要点之一。
这不是有效的 HTML，因为您不应该在 a 元素中包含 button。见stackoverflow.com/questions/6393827/…。相反，您可以在 li 中将它们设为兄弟姐妹。

【解决方案2】：

试试这个：

ul.media-grid li {
  position: relative;
  display: inline-block;
}

.btn {
  position: absolute;
  bottom: 10px;
  right: 6px;
}

.media-grid a {
  float: none;
  display: inline-block;
}

http://jsfiddle.net/vXMMA/446/

【讨论】：

我不是 css 专家，但这两种解决方案都有效，但在所有网络浏览器上都有效？