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-1a6d91831675/skitch.png?resizeSmall&width=832

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

What I want

但是，当我在这里添加边距（并稍微改变宽度）时，我最终打破了较小的视图，就像这样。

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");
});

所以，那就是我所在的地方。我对基金会相当新，因为我相信你可以通过这个问题来判断。

无论如何，在这里添加保证金的好方法是什么？

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;
}

在Foundation列中添加CSS边距？

1 个答案: