Bootstrap 3方形瓷砖显示屏

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>

这就是我得到的：

占位符示例将每个磁贴动态塑造为保留为方形磁贴，我希望我的html / css / js也是如此。是可能的，还是我必须在那里使用img？

Answer 1

如果您希望它们始终保持正方形，您可以在dummy之前使用thumbnail占位符和100％保证金，然后使用thumbnail ...

CSS：

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

http://bootply.com/108128