內聯元素之間的相等邊距

我正在使用帶全角的引導網格系統，我想要一個部分，其中有四個img-elements具有相同的邊距，邊距應該是響應的。該部分位於頁面的中心。內聯元素之間的相等邊距

我可以說每個img元素的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; 
}

來源

2016-02-14 Topper

如果其僅曾經將是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 -->

來源

2016-02-14 23:21:41 gavgrif

內聯元素之間的相等邊距

回答

相關問題