指南針susy列沒有排水溝？

Question

我有一個完美的網格，除了我希望導航欄中的列彼此碰撞。這是桌面上的24列魔法網格，每個導航項目都是4/24。如果我嘗試使用負邊距，則不再跨越導航欄的整個寬度，它們向左滑動並留下一個洞（最後一項是歐米茄）。這可以通過列來完成，還是隻需要在不使用導航條的情況下執行？在這裏，在這個截圖我有彩色他們全部灰色，使之明顯：

Answer 1

Eric Meyer太棒了，他現在包含了一些能夠幫助你解決這個問題的東西Steve - 在Susy的最新版本中看看bleed。

我相信這會幫助你解決你的問題。它可以讓你做到以下幾點：

.nav-item { 
    ... 
    @include bleed(1 of 4); 
} 

有一個徹底讀通過the update to susy with isolate & bleed

希望幫助的！而感謝埃裏克對與Susy :)

Answer 2

如果您不需要水槽，你不需要從與Susy幫助 - 道理很簡單：

.nav-item { 
    float: left; 
    width: percentage(4/24); 
} 

就是這樣，但正如您注意到的，由於子像素四捨五入，在某些瀏覽器中還留有額外的空間。除了學習圍繞它進行設計外，沒有簡單的子像素舍入解決方案。 Susy將最後一列懸浮在右邊，因爲隱藏空間比在邊緣更容易。

你的other option是有點哈克，讓你更接近（但不是整個方式）。通過將所有列拉到左側，您可以將它們推回到位，而不會讓舍入錯誤加起來。這樣，你永遠不會有比1px的差距更多：

.nav-item { 
    float: left; 
    width: percentage(4/24); 

    // pull things flush left 
    margin-right: -100%; 

    // push things back into place 
    @for $i from 1 through 6 { 
    &:nth-child(#{$i}) { margin-left: percentage(($i - 1)*4/24); } 
    } 
} 

可以代替使用類：如果你是支持，當然老的瀏覽器，第n個孩子。如果您正在進行任何響應式設計，這是您可以做的最好的。無法完全通過響應式設計來避免子像素四捨五入。我強烈建議學習圍繞這個設計。