如何增加zurb基金會的行寬？

嘿，我是一個新手在這裏。我正在學習Zurb基礎，我的問題是如何增加框架中行的默認寬度。像960網格系統有960像素。我怎麼能增加行的意願可能1200px，所以我應該添加一個自定義樣式表？請幫助，謝謝。如何增加zurb基金會的行寬？

2013-11-10 Marc Andre Jiacarrini

您不必使用!important。只要將您新的CSS-說app.css -below的foundation.css，並使用以下命令：

.row { 
    max-width: .px; 
}

您也可以使用另一個類，並添加此屬性，使其不會與默認行發生衝突。

來源

2014-03-22 16:35:59 designerNProgrammer

完美的解決方案！ – Switchfire

@Switchfire感謝哥們。 – designerNProgrammer

這是有效的，但在我的情況下，它也限制了全寬度行的最大寬度，所以如果在佈局中有全寬度行，則可能需要將.row.full-width重置爲100％ – vtacreative

覆蓋.row類的max-width屬性，並將其設置爲所需的寬度。

.row { 
    max-width: ...px !important; 
}

如果找你使用SASS，搜索電網變量在documentation，在那裏你會找到如何覆蓋行的寬度，裝訂線寬度和更多信息。

$row-width: em-calc(1000);

來源

2013-11-11 13:31:03

最好不要使用'！important'並且瞭解CSS的特殊性。粉碎mag有一篇關於它的精彩文章http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ –

沒錯，你可以隨時通過包含.row { }之後的基礎CSS樣式 - 並因此省略！重要。或者只是使用SASS。 :) PS。即使ZURB也使用很多！重要的;在他們的框架中 - 所以它可以在某些情況下有用。 –

更好的辦法是去你的項目中的基礎文件_settings.scss，如果你沒有_settings.css文件或者你不知道它的位置請在線檢查。只是打開並找到這個

$row-width: rem-calc(980); //change up to what you want

並且這個上面的值將產生像下面的值的行寬，即61.25rem。

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */ 
.row { 
    margin: 0 auto; 
    max-width: 61.25rem; 
    width: 100%; 
}

但現在，如果你從980更改行寬像1280一樣，例如下面

$row-width: rem-calc(1280);

那麼下面你可以看到，我的CSS是與新的最大寬度自動生成

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */ 
.row { 
    margin: 0 auto; 
    max-width: 80rem; 
    width: 100%; 
}

請注意設置，因爲您可以徹底改變整個網站的外觀和佈局。

來源

2015-12-01 13:41:29 Danish

-1

基金會6引入了類.expanded，讓寬度流體：http://foundation.zurb.com/sites/docs/grid.html#fluid-row

它仍然導致與填充的問題，雖然，不知道如何解決這個問題。

來源

2016-07-22 11:06:33 Rvanlaak

如何增加zurb基金會的行寬？

回答

相關問題