Twitter Bootstrap媒体网格：包含图像的方框
这不是一个真正的问题，而是解决我刚才遇到的问题。 我在这里发布它，因为我可以想象其他人想使用它。
我遇到的问题是：我想通过使用网格系统（span2，span3等）的固定宽度的Twitter Bootstrap（Media Grid模块）来显示方形图像切片的概述，而不会混淆标记。
下面的LESS代码是开箱即用的，并且是Bootstrap库的扩展：
.squareColumns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
height: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.maxSquareColumns(@columnSpan: 1) {
max-width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
max-height: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
ul.square-media-grid {
.media-grid;
li a.span1 { .squareColumns(1); img { .maxSquareColumns(1); } }
li a.span2 { .squareColumns(2); img { .maxSquareColumns(2); } }
li a.span3 { .squareColumns(3); img { .maxSquareColumns(3); } }
li a.span4 { .squareColumns(4); img { .maxSquareColumns(4); } }
li a.span5 { .squareColumns(5); img { .maxSquareColumns(5); } }
li a.span6 { .squareColumns(6); img { .maxSquareColumns(6); } }
li a.span7 { .squareColumns(7); img { .maxSquareColumns(7); } }
li a.span8 { .squareColumns(8); img { .maxSquareColumns(8); } }
li a.span9 { .squareColumns(9); img { .maxSquareColumns(9); } }
li a.span10 { .squareColumns(10); img { .maxSquareColumns(10); } }
li a.span11 { .squareColumns(11); img { .maxSquareColumns(11); } }
li a.span12 { .squareColumns(12); img { .maxSquareColumns(12); } }
li a.span13 { .squareColumns(13); img { .maxSquareColumns(13); } }
li a.span14 { .squareColumns(14); img { .maxSquareColumns(14); } }
li a.span15 { .squareColumns(15); img { .maxSquareColumns(15); } }
li a.span16 { .squareColumns(16); img { .maxSquareColumns(16); } }
li a.span17 { .squareColumns(17); img { .maxSquareColumns(17); } }
li a.span18 { .squareColumns(18); img { .maxSquareColumns(18); } }
li a.span19 { .squareColumns(19); img { .maxSquareColumns(19); } }
li a.span20 { .squareColumns(20); img { .maxSquareColumns(20); } }
li a.span21 { .squareColumns(21); img { .maxSquareColumns(21); } }
li a.span22 { .squareColumns(22); img { .maxSquareColumns(22); } }
li a.span23 { .squareColumns(23); img { .maxSquareColumns(23); } }
li a.span24 { .squareColumns(24); img { .maxSquareColumns(24); } }
li a img { display: block; margin: auto; }
}
用法：
<ul class="square-media-grid">
<li>
<a href="#" class="span3">
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
</a>
</li>
<li>
<a href="#" class="span3">
<img class="thumbnail" src="http://placehold.it/80x120" alt="">
</a>
</li>
<li>
<a href="#" class="span3">
<img class="thumbnail" src="http://placehold.it/230x330" alt="">
</a>
</li>
</ul>
结果：
http://tinyurl.com/7aqby3a
链接地址: http://www.djcxy.com/p/88311.html