css - 以等边距居中图像的简单方法

Question

我尝试将七个图像放在 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

但是我不确定当“图像不再适合彼此相邻”时您想要发生什么？