如何減少基礎網格中的項目之間的空間？

我正在建立一個簡單的網站基礎，我認爲這將使它更快，因爲它有令人敬畏的網格。問題是當我將圖像放在網格上時，它們之間的間距太遠。我想減少間距，使圖像基本上相距15px左右。我試圖改變填充和邊距，但它拋出了整個網格。有沒有一種簡單的方法在基金會中實現這一點，還是我從頭開始寫這個更好？我的HTML如下。如何減少基礎網格中的項目之間的空間？

<div class="row"> 
<div class="gallery small-4 large-4 columns"> 
    <img src="assets/img/chaiLatte.jpg" alt="Painting by LaRue. "> 
</div> 
<div class="gallery small-4 large-4 columns"> 
    <img src="assets/img/milkchocolate.jpg" alt="Painting by Bellingham."> 
</div> 
    <div class="gallery small-4 large-4 columns"> 
     <img src="assets/img/darkChocolate.png" alt="Painting by Bellingham."> 
    </div>

來源

2013-08-22 London804

可以摺疊電網通過添加類到包含圖像的行刪除的間距。然後，您可以將填充或邊距添加到圖像中，以提供所需的15px間距。

<div class="row collapse"> 
    <div class="gallery small-4 large-4 columns"></div> 
    <div class="gallery small-4 large-4 columns"></div> 
    <div class="gallery small-4 large-4 columns"></div> 
</div>

來源

2013-08-23 03:11:11 jameswilliamiii

有一個$列排水溝中_settings.scss變量。這控制了網格間距。默認情況下，它的設置爲$ column-gutter：emCalc（30px）;。嘗試更改此值。如果您使用sass版本，這隻會幫助您。

來源

2013-08-23 10:36:03

如何減少基礎網格中的項目之間的空間？

回答

相關問題