Bootstrap 3方砖显示 [英] Bootstrap 3 square tile display
问题描述
使用Bootstrap 3,我想要一个方形平铺的菜单,看起来像Bootstrap的缩略图(
Using Bootstrap 3, I want to have square tiled menu that looks like Bootstrap's thumbnail (http://getbootstrap.com/components/#thumbnails). The code there to get tiled display is:
<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>
I just want to replace the img placeholder as (vertically aligned) html text. Hence, I thought I can just do the following:
<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>
And this is what I got:
The placeholder examples have each tile dynamically shaped to stay as square tiles, and I want mine, in html/css/js, to be that way too. Is it possible, or do I have to use an img there?
If you want them to always stay square, you can use a dummy
placeholder with 100% margin before the thumbnail
, and then absolute position the thumbnail
...
CSS:
.dummy {
margin-top: 100%;
}
.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
}
这篇关于Bootstrap 3方砖显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!