Question

我正在建立一个基础的简单网站，我认为它会更快，因为它有很棒的网格。问题是当我将图像放在我的网格上时，它们之间的间距太远了。我想减小间距，使图像基本上相差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>

Answer 1

您可以通过将该类添加到包含图像的行来折叠网格以删除间距。然后，您可以为图像添加填充或边距，以获得所需的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>

Answer 2

_settings.scss 中有 $ column-gutter 变量。这可以控制网格间距。默认设置为 $ column-gutter：emCalc（30px）; 。尝试更改此值。如果您使用的是sass版本，这只会对您有所帮助。

如何减少基础中网格中项目之间的空间？

2 个答案: