Twitter Bootstrap - 宝丽来效果（CSS）改变网格

Question

我使用Twitter Bootstrap构建页面。要显示图库，我使用如下设置：

<div class="container">
    <div class="row">
        <div class="span1">
            <a href="#">
                <img src="http://www.placehold.it/50x50" />
            </a>
        </div><!-- /.span -->
        <div class="span1">
            <a href="#">
                <img src="http://www.placehold.it/50x50" />
            </a>
        </div><!-- /.span -->
        <div class="span1">
            <a href="#">
                <img src="http://www.placehold.it/50x50" />
            </a>
        </div><!-- /.span -->
    </div><!-- /.row -->
</div><!-- /.container -->

Fiddle

现在我想对这些图像采取某种偏光效果。为此，我添加了一个包含photo和a的{​​{1}}类。像这样：

img

Fiddle

正如您所看到的，添加此类会以某种方式移动网格。这就是网格不再居中的原因。我能做些什么来解决这个问题吗？

最好的情况是<div class="span1"> <div class="photo"> <a href="#"> <img src="http://www.placehold.it/50x50" /> </a> </div> </div><!-- /.span --> 获得span并且图片位于background-color的中心位置。我相信使用填充然后我可以控制边框的宽度 - 这是最初的想法，但它不起作用。你会如何创造这样的效果。使用span也会移动网格。

我添加了一些截图：

这是第一个例子 - 以视觉为中心

第二个例子 - 明显改变了

Answer 1

解决了这个问题。忘了我已将width和height添加到.photo。删除这些值后，它就像它应该的那样工作。