<分区>
css - Twitter Bootstrap - 宝丽来效果 (CSS) 移动网格
我正在使用 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 -->
现在我想要对这些图像产生某种宝丽来效果。为此，我添加了一个包含 a 和 img 的类 photo。像这样:
<div class="span1">
<div class="photo">
<a href="#">
<img src="http://www.placehold.it/50x50" />
</a>
</div>
</div><!-- /.span -->
如您所见，添加此类会以某种方式移动网格。这就是网格不再居中的原因。我能做些什么来解决这个问题吗？
如果 span 有一个 background-color 并且图像位于 span 的中心，那将是最好的。我相信使用填充我可以控制边框的宽度 - 这是最初的想法，但它不起作用。你会如何创造这样的效果。使用 border-iage 也会移动网格。
我添加了一些截图:
这是第一个例子——视觉居中
第二个例子 - 明显转移
最佳答案
问题解决了。忘记了我已将 width 和 height 添加到 .photo。删除这些值后，它会正常工作。
关于css - Twitter Bootstrap - 宝丽来效果 (CSS) 移动网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11622251/