javascript - 向 Foundation 列添加 CSS 边距？

Question

在使用 Foundation 5 时，我在添加边距和保持列中的响应时遇到了一些问题。

目前，这里是代码和屏幕截图，展示了它的倍数在一起的样子。

<div class="large-3 medium-3 columns panel coupon sticky">
    Stuff goes here
</div>

(由于是新账号，只能发2个链接)

www.evernote.com/shard/s180/sh/36f1f108-907f-4ba3-9bb2-57383f24e1fd/6fcb078071e9b927ff297b7af27353ee/res/166b163a-5f51-4209-a0dd-1a6d918316 75/skitch.png?resizeSmall&width=832

但是，我想要的更像是这样......

What I want

但是，当我在此处添加边距(并稍微更改宽度)时，我最终会破坏较小的 View ，就像这样。

Ruined responsive view

这是我用来减少 20 像素并添加一些边距的 javascript。

$(document).ready(function() {
    var w = $('.coupon').css("width");
    var numW = w.replace(/\D/g,'');
    $('.coupon.large-3').css("width", (numW - 20));
    $('.coupon.large-3').css("margin", "10px 5px");
});

所以，这就是我所在的位置。我是 Foundation 的新手，我相信您可以从这个问题中看出这一点。

无论如何，像这样在此处添加边距的好方法是什么？

Answer 1

您添加的链接无效。 我知道这听起来很常识，但您是否阅读过有关在基础中使用网格的文档？ http://foundation.zurb.com/docs/components/grid.html

你使用这样的包装行吗？

<div class="row">
  <div class="small-2 columns">2 columns</div>
  <div class="small-10 columns">10 columns</div>
</div>

在性能方面，最好在样式表中添加一个额外的 css 类，而不是在浏览器中使用 Javascript 重新计算。

  $('.coupon.large-3').css("margin", "10px 5px");

应该是

.coupon.large-3 {
  margin:10px 5px;
}