zurb基金会固定宽度柱3

Question

我如何在zurb基金会3中实施固定柱网格？目前，基金会的网格是流动的，基于百分比。我想实现类似于自举（非流体）网格的东西，因此在网格显示方式上只有4个posibilites（至少在它下降到流动状态时，这是流体）

我想保留基础网格的功能（和语义），所以我不想简单地将它换成引导网格。

我知道这违背了纯粹的“响应”网格的理论，但处理现实世界的客户和他们的要求，使我走向具有有限组是可以预见的网格行为瘦（自适应网格？）

Answer 1

您需要将CSS中的列和行宽重置为覆盖@media声明中的固定位置。举例来说，你必须

.row { width: 100%;} 
.one, .row .one { width: 8.33333%; }  
.two, .row .two { width: 16.66667%; }  
.three, .row .three { width: 25%; } 

你现在就需要，

@media screen and min-width(960px){ 
    .row { width: 960px;} 
    .one, .row .one { width: 80px /* 960 x 8.33333% */ }  
    .two, .row .two { width: 160px; /* 960 x 8.33333% */}  
    .three, .row .three { width: 240px; /* 960 x 8.33333% */} 
} 

以下是更新问题之前，以前的答案。

添加一个包装DIV页面各处

<div class="wrapper"> 
<!-- Page content and styles go here --> 
</div> 

，然后在你的CSS，你应该包括

.wrapper { 
    width: 98%; 
    max-width: 1200px; 
} 

Answer 2

为了防止行缩放，你需要把下面的内容app.css：

.row { max-width: none; } 

这将使行宽固定为fo r 767px以上的所有视口（767px是默认的移动网格断点）。

如果你需要你的网格，几个固定的步骤，使用可调媒体查询尝试：

@media screen and (min-width: 768px) and (max-width: 940px) { 
    .row { width: 840px; } 
} 

@media screen and (min-width: 941px) and (max-width: 1050px) { 
    .row { width: 960px; } 
}