Используя 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 placeholder как (вертикально выровненный) 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?
Если вы хотите, чтобы они всегда оставались квадратными, вы можете использовать заполнитель dummy с 100% -ным запасом до thumbnail, а затем абсолютное положение thumbnail...
CSS
.dummy {
margin-top: 100%;
}
.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
}