内联元素之间的相等边距答案

【问题标题】：Equal margin between inline elements内联元素之间的相等边距
【发布时间】：2016-02-15 07:21:41
【问题描述】：

我正在使用全角引导网格系统，我想要一个部分，其中我有四个具有相等边距的 img 元素，并且边距应该是响应式的。该部分位于页面的中心。

我可以说每个 img-element margin-right: 20px 或类似的东西，但我可以让这个也响应吗？

<div class="row" id="content_services">
            <div class="col-md-offset-2 col-md-8">
                <section id="services_section">
                    <img src="pictures/test.jpg" alt="Test" class="img-responsive">
                    <img src="pictures/test.jpg" alt="Test" class="img-responsive">
                    <img src="pictures/test.jpg" alt="Test" class="img-responsive">
                    <img src="pictures/test.jpg" alt="Test" class="img-responsive">
                </section>
            </div>
        </div><!-- END ROW CONTENT_SERVICES -->

样式表：

#services_section{
}
#services_section img{
    height: 275px;
    width: 275px;
    display: inline;
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如果它只有 4 个元素 - 使用嵌套列结构。每个图像将在中型和大型视口的屏幕上以单行形式显示在页面上，将在小视口上成对显示，并在小视口上垂直堆叠。您仍然需要设置图像的样式以显示在每个图像的中心（或者像我所做的那样在父 div 上使用 text-center 类，或者通过每个 img 上的 css）。如果您需要更改图像的数量 - 请记住幻数是 12 - 每列可以分为 12 列，因此您可以更改不同数量的图像元素的大小。

还请注意，一个部分在语义上要求其结构中的标题（h1 - h6 - 定义其标题）是有效的 html5。希望这会有所帮助，加夫格里夫

<div class="row" id="content_services">
            <div class="col-md-offset-2 col-md-8 text-center">
                <section id="services_section">
                  <div class="col-md-3 col-sm-6">
                    <img src="pictures/test.jpg" alt="Test" class="img-responsive">
                 </div>
                 <div class="col-md-3 col-sm-6">
                    <img src="pictures/test.jpg" alt="Test" class="img-responsive">
                 </div>                 
<div class="col-md-3  col-sm-6">
                    <img src="pictures/test.jpg" alt="Test" class="img-responsive">
                 </div>
                 <div class="col-md-3 col-sm-6">
                    <img src="pictures/test.jpg" alt="Test" class="img-responsive">
                 </div>
                </section>
            </div>
        </div><!-- END ROW CONTENT_SERVICES -->

【讨论】：