基金會4 - 行之間的邊距/陰溝

我有一個非常簡單的問題：如何獲得基金會4行之間的保證金？基金會4 - 行之間的邊距/陰溝

以下標記每行產生3個間隔的鏈接圖像，但行之間沒有間隙。也許一個3×3的網格不應該這樣做。否則，基金會可以做一個沒有附加CSS的方格嗎？

<div class="row"> 
    <a class="large-4 columns"><img /></a> 
    <a class="large-4 columns"><img /></a> 
    <a class="large-4 columns"><img /></a> 
</div> 
<div class="row"> 
    <a class="large-4 columns"><img /></a> 
    <a class="large-4 columns"><img /></a> 
    <a class="large-4 columns"><img /></a> 
</div> 
<div class="row"> 
    <a class="large-4 columns"><img /></a> 
    <a class="large-4 columns"><img /></a> 
    <a class="large-4 columns"><img /></a> 
</div>

爲了時間的利益，我已經實現了9個左浮動元素，但我仍然對基金會中的行間距感到好奇。

鉭，盧克

來源

2013-10-15 Luke Puplett

有浮動元素之間的間距是'offset-class'大偏移量-1 ...像這樣 –

您可以覆蓋與margin-bottom: 10px;

或者在CSS的.row默認的保證金，以實現基金會圖像的3×3格的好方法是使用一個3行動塊格。

基金會5 block grid
基金會6 block grids

來源

2013-10-16 21:47:36

任何想法爲什麼這不適用於我。看起來，foundation.css重寫了我對任何行div的每個css更改 - 無論我放置css的位置如何？ –

我也要高度建議使用薩斯在一個地方或一個部分薩斯文件內均勻改變這種以各種方式導入基礎部分後。

例如，如果你去塊網格路線，你可以均勻地通過由ZurbW¯¯提供的薩斯變量更改/基金4：

$block-grid-elements: 12; 
$block-grid-default-spacing: em-calc(20);

或者你可以做到這一點單獨使用一個mix-in像以下

.my-fancy-three-by-three 
    +block-grid($per-row: 3, $base-styles: true) 
    // If you're going mobile-first, and would do multiple block variants depending on various sizes, additional block-grid declerations are recommended from my personal experience should be FALSE in order to not have unnecessary code bloat.

如果你的塊變體將是簡單，預先做好媒體查詢尺寸提供給您的基金會4件作品與你正在做什麼的整體設計，您可以用建設 - 在塊類中，例如ul.small-block-grid-#。

就整體網格，它不能使用涉及的差距是4基金會提供所提供的變量是簡單的：

$block-grid-elements: 12 
    $block-grid-default-spacing: emCalc(20px)

你可以看到從docs提供更多的基金會4

來源

2013-11-15 07:47:28

'em-calc'已被棄用，應該使用'rem-calc'。 –

基金會4 - 行之間的邊距/陰溝

回答

相關問題