Question

我正在使用全宽度的自举网格系统，我希望有一个部分，其中我有四个具有相同边距的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;
}

Answer 1

如果它只有4个元素 - 使用嵌套列结构。每个图像将在整个页面上以单行显示在中型和大型视口上，在小视口上成对显示，并在小视口上垂直堆叠。您仍然需要将图像设置为在每个图像的中心显示（在父div上使用文本中心类，或者在每个img上使用css）。如果您需要更改图像数量 - 请记住幻数为12 - 每列可以分为12列，以便您可以更改不同数量图像元素的大小。

另外请注意，一个部分在语义上要求其结构中的标题（h1 - h6 - 定义其标题）为有效的html5。希望这会有所帮助，Gavgrif

<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 -->

内联元素之间的平均余量

1 个答案: