首页 文章

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

提问于
浏览 次
2

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

2 回答

  • 2

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

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

    回复于

相关问题