Twitter bootstrap Twitter引导媒体网格：带有图像的方形框

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

我遇到的问题是：我想使用Twitter引导（媒体网格模块），使用网格系统（span2、span3等）以固定的宽度展示方形图像块的概览，而不会弄乱标记

下面的LESS代码是开箱即用的，是引导库的扩展：

.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>

结果:

---

你能把这句话当作一个问题，并把答案写进答案里吗。仅供参考：我的理解正确吗？除了引导为缩略图提供的默认宽度约束之外，您基本上还使用span类约束高度？在bootstrap 2.0.1中，它似乎不适用于我（即使我将它从媒体网格更改为缩略图）。