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基金会的半流体设计？

回答

相关问题