以相同边距居中图像的简单方法

Question

我正试图将7个图像放在Bootstrap 3容器中（图像中的红色），直到图像不再相邻为止。现在，我可以硬编码容器的宽度并测量边距，并为每个图像和每个屏幕尺寸等单独应用或通过JavaScript（jQuery）。

是否有一种简单的方法可以获得以下结果，当容器大小发生变化时，该结果也可以使用？

<footer>
    <div class="container">
        <div class="social">
            <img src="img/social/twitter.png" />
            <img src="img/social/twitter.png" />
            <img src="img/social/twitter.png" />
            <img src="img/social/twitter.png" />
            <img src="img/social/twitter.png" />
            <img src="img/social/twitter.png" />
            <img src="img/social/twitter.png" />
        </div>
    </div>
</footer>

如何：

应该如何：

Answer 1

Bootstrap-y方法是使用nav-justified ..

<div class="container">
  <ul class="social nav nav-justified">
    <li class="text-center"><img src="//placehold.it/75x75"></li>
    <li class="text-center"><img src="//placehold.it/75x75"></li>
    <li class="text-center"><img src="//placehold.it/75x75"></li>
    <li class="text-center"><img src="//placehold.it/75x75"></li>
    <li class="text-center"><img src="//placehold.it/75x75"></li>
    <li class="text-center"><img src="//placehold.it/75x75"></li>
    <li class="text-center"><img src="//placehold.it/75x75"></li>
  </ul>
</div>

http://bootply.com/94870

但我不确定当“图像不再相互贴合”时你想要发生什么？

Answer 2

使用

text-align: justify;

在父容器上

，以便均匀地分隔所有图像。

进一步阅读：http://css-tricks.com/grids-with-text-align-justify/