javascript - zurb基础3中的固定宽度列

Question

如何在 zurb Foundation 3 中实现固定的柱状网格？目前，基金会的网格是流动的并且基于百分比。我想实现类似于引导（非流体）网格的东西，其中只有 4 个关于网格显示方式的可能性（至少在它下降到移动之前，它是流动的）

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

我知道这与纯“响应式”网格的理论背道而驰，但与现实世界的客户及其需求打交道使我倾向于拥有一组可预测的有限网格行为（自适应网格？）

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; }

这将使所有高于 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; }
}