Twitter Bootstrap Media Grid：带图像的方框

Question

这不是一个真正的问题，而是我刚才遇到的问题的解决方案。我在这里发布，因为我可以想象其他人想要使用它。

我遇到的问题是：我想使用网格系统（span2，span3等）使用具有固定宽度的Twitter Bootstrap（媒体网格模块）显示方形图块的概述，而不会使标记混乱。

下面的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