Question

如何在zurb foundation 3中实现固定列网格？目前，基金会的网格是流动的，并且基于百分比。我想实现类似于bootstrap（非流体）网格的东西，其中只有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; }

这将使所有视口的行宽度固定在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; }
}

zurb foundation 3中的固定宽度列

2 个答案: