0

我正在使用 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 -->

小提琴

现在我想要对这些图像进行某种宝丽来效果。为此，我添加了一个photo包含aand的类img。像这样：

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

小提琴

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

最好的情况是如果span得到 abackground-color并且图像位于span. 我相信使用填充我可以控制边框的宽度 - 这是最初的想法，但它不起作用。您将如何创建这样的效果。使用 aborder-iage也会移动网格。

我添加了一些截图：

这里是第一个例子——视觉居中 示例 1

第二个例子 - 明显转移 示例 2

4

1 回答 1

0

解决了这个问题。忘记了我已经添加了width和。删除这些值后，它就可以正常工作了。height.photo

于 2012-07-24T00:49:26.950 回答