javascript - Bootstrap 3方 block 展示

Question

使用 Bootstrap 3，我想要一个方形的平铺菜单，看起来像 Bootstrap 的缩略图 (http://getbootstrap.com/components/#thumbnails)。获得平铺显示的代码是:

<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail">
    <img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
  </a>
</div>

我只想将 img 占位符替换为(垂直对齐的)html 文本。因此，我想我可以做到以下几点:

<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail purple">Homepage</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail purple">View Profile</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail purple">Something 2 lines</a>
</div>

这就是我得到的:

占位符示例让每个图 block 都动态调整为正方形图 block ，我希望我的 html/css/js 也是这样。有可能吗，还是我必须在那里使用 img？

Answer 1

如果您希望它们始终保持正方形，您可以在 thumbnail 之前使用具有 100% 边距的 dummy 占位符，然后绝对定位 thumbnail...

CSS:

.dummy {
    margin-top: 100%;
}
.thumbnail {
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 15px;
    right: 0;
}

http://bootply.com/108128