展開網格系統之外的響應元素？

Question

我在使用Foundation 5製作一個響應式網站。一切都很順利，但我遇到的一個問題是，設計師寄給我的PSD很大程度上遵循12列的網格，這非常棒。然而，設計的幾個元素在網格外擴展到最左邊或最右邊。同樣在一些「行」中，將有兩個元素並排放置，但每個元素每個會佔用7個網格空間。

雖然它在photoshop中看起來不錯，但用響應式網格對其進行編碼證明具有挑戰性。有沒有人有任何想法如何解決這個問題？

Answer 1

我用接近這一佈局的兩個不同的方式：

使用切緣陰性拉左/右。

例如，如果你的元素翻出由25px的網格的左側邊緣的，你可以使用：

.element{ 
    margin-left: -25px 
} 

只要您使用的是流體網格中的元素中會流以填補空間。

這是最簡單的方法，在Bootstrap實現中非常常見，所以我沒有預見到Foundation會有很大的不同（對於完全披露：我沒有使用過Foundation）。如果您使用度量值向外拉，儘管您需要確保這些值通過不同的視口/媒體查詢進行處理。

展開網格。

這可能是最相關的，你提到你有一個2x7網格頁面上。如果設計中的某些內容明顯落在您使用的網格之外，那麼請使用新的類名稱，並使用它來修改網格在頁面中特定位置的行爲方式。請記住，無論您打算使用哪種框架，它只是作爲一個起點：您應該感到舒適和自信，可以根據您的需求（以及您的設計師的需求）進行修改和構建。