ZURB基金會的半流體設計？

我是一個漂亮的基金會新手，但有沒有可能使默認的網格寬度更大或更好，只有80％的屏幕寬度與額外的最小寬度？ZURB基金會的半流體設計？

如果Foundation不可能，Bootstrap有可能嗎？

2013-01-31 Stasik

基金會3的好處之一是它是用SASS構建的，所以網格系統的CSS完全依賴於變量。

的行的寬度的樣式是scss/foundation/components/_grid.scss：

/* The Grid ---------------------- */ 

.row { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto; 
    .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); } 

    &.collapse { 
    .column, .columns { padding: 0; } 
    } 
    .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); 
    &.collapse { margin: 0; } 
    } 
}

行的總寬度依賴於$rowWidth變量，即在其又在scss/foundation/_settings.scss定義：

// Grid Settings 

$rowWidth: 1000px !default; 
$columnGutter: 30px !default; 
$totalColumns: 12 !default; 
$mobileTotalColumns: 4 !default; 
$blockGridElements: 12 !default; // Highest number of block grid elements, Maximum of 24 supported

所以您需要將$rowWidth變量更改爲您需要的任何大小。

來源

2013-02-01 10:41:00

其設置爲80％，爲電網的工作，而不是爲頂級導航 – Stasik

@Stasik嘗試「添加'.contain-to-grid'到頂部欄，使其成爲完整的寬度，但網格上的內容。」 –

這是有點破，但它可以通過設置.contain到網格寬度不是$ rowWidth（這是例如80％），但100％手動修復;） – Stasik

使用基金會4，我只是簡單地添加

.row { max-width: 100%; }

的風格。適用於rows以及top-bar

來源

2013-03-12 09:41:32 andig

但在內部放大組件/部分該排？ B'coz當我做到這一點時，divs對我來說顯得不大。我可以發現這一點，因爲我的代碼中的所有div都有一個圖像，並且圖像比正常尺寸顯得更大。 –

它的確如所有列都只是％，所以它們可以縮放。 – andig

如果使用SASS和基礎的5版本，你可以自定義行有：

$row-width: 100%;

來源

2014-07-02 01:27:10 dbam

ZURB基金會的半流體設計？

回答

相關問題