向基礎列添加CSS頁邊距？

在使用Foundation 5時，我在添加邊距時出現了一些問題，並在列中保留了響應性。向基礎列添加CSS頁邊距？

在當前，這裏是代碼和屏幕截圖。

<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 &寬度= 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"); 
});

所以，那就是我所在的位置。我對基金會來說是相當新的，因爲我確信你可以通過這個問題分辨出來。

無論如何，在這裏像這樣添加邊距的好方法是什麼？

來源

2014-07-10 Shawn White

真的犯規給你想要的東西，因爲2個鏈接不工作？ –

您添加的鏈接不起作用。我知道這聽起來很常識，但您是否閱讀過有關在基礎中使用網格的文檔？ 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; 
}

來源

2014-07-10 15:11:19

向基礎列添加CSS頁邊距？

回答

相關問題