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

时间:2013-11-18 13:54:20

标签: css twitter-bootstrap twitter-bootstrap-3

我正试图将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>

如何: Now

应该如何: Should be

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

使用

text-align: justify;
在父容器上

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

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