Zurb基金會4 - 第一列和最後一列沒有填充

我在我的項目中使用Foundation 4和Sass。我在柱子的排水溝裏遇到了麻煩。我的問題是列的左右兩側都有填充，除非列橫跨整個寬度。因此，如果我有一個橫跨全寬（12列）的元素的行，它沒有填充，它的寬度是100％。但是如果我有另一排有幾列的話，第一個和最後一個是由排水溝縮進的，所以它們不會與上面的元素對齊。Zurb基金會4 - 第一列和最後一列沒有填充

一個例子：

HTML

<div class="row"> 
    <div class="widget"> 
     Some contents here 
    </div> 
</div> 
<div class="row"> 
    <aside>Left aside, first column</aside> 
    <section>Right section, last column</section> 
</div>

CSS

.widget { 
    /*Spans the 12 columns*/ 
    @include grid-column($total-columns); 
} 
aside { 
    @include grid-column(3); 
} 
section { 
    @include grid-column(9, true); 
}

所以你看，widget將沒有填充和會比aside +的section大。

我讀過Bootstrap的第一列和最後一列沒有填充符，我想做這樣的事情。我試圖在父行上使用「崩潰」，但它似乎沒有做任何事情，填充仍然存在。

我知道我可以一個.first-class添加到第一列和做.first-class { padding-left: 0 !important; }，這是最常見的答案，我發現，但它似乎並不十分語義...

我希望基金會將一個參數添加到他們的網格列mixin管理這樣的填充！

來源

2013-09-25 ithil

我希望基金會會添加一個參數到他們的網格列mixin來管理像這樣的填充！

grid-column already has a collapseproperty。您也可以自己指定padding-right: 0; padding-left: 0，但是collapsewill do that for you。

來源

2013-09-25 12:22:06

哦，我明白了！謝謝！我試圖將「collapse」應用於行而不是列......關於Foundation Docs中的「collapse」選項的解釋對我來說似乎不太清楚，因爲它說_「如果您有摺疊的行，則需要設置列也要崩潰。「_。但我的排沒有倒塌，所以我有點滑雪。我更喜歡你的回答中的github源代碼，它清楚地說明了「如果崩潰，擺脫填料填充」_。我明白了！ :) – ithil

Zurb基金會4 - 第一列和最後一列沒有填充

回答

相關問題