如何使用自定义百分比拆分 Zurb Foundation 的网格？答案

【问题标题】：How split the grid of Zurb Foundation with custom percentage?如何使用自定义百分比拆分 Zurb Foundation 的网格？
【发布时间】：2014-06-05 16:33:41
【问题描述】：

我正在使用 Zurb Foundation 的 12 列网格来拆分网站的布局。根据 PSD 设计，我需要将行分成两列 - 20% 和 80%。我怎样才能做到这一点？

【问题讨论】：

标签： zurb-foundation

【解决方案1】：

您确定需要拆分行，而不仅仅是在行中使用列吗？

如果您可以选择，您只需将 12 列网格更改为 10 列网格即可。

使用 Foundation SASS，只需更改此设置

$total-columns: 12;

到

$total-columns: 10;

在_settings.scss

现在你有一个 10 列的网格，并且 20% | 80% 的列可供您使用。瞧！

【讨论】：

【解决方案2】：

<div class="row">
   <div class="side">
.
.
.
   </div>
   <div class="main">
.
.
.
   </div>

css

.side{
 width:20%;
}
.main{
width:80%;
}

【讨论】：

谢谢。我再次编辑了这个问题。你知道如何在 Zurb Foundation 中做到这一点吗？
如果你想用 zurb 来做，请使用你自己的类。或者通过自定义基础foundation.zurb.com/develop/download.html#customizeFoundation使用10列网格结构@

【解决方案3】：

实现这一点的一种方法（除了如上所述仅使用您自己的类之外）是在您的独特容器中定位基础的内置列。

<div id="unique-container">
  <div class="large-2 columns">
  <!--  your code -->
  </div>
  <div class="large-10 columns">
  <!--  your code -->
  </div>
</div>

CSS

#unique-container.large-2 {
  width: 20%;
}

#unique-container.large-10 {
  width: 80%;
}

希望这会有所帮助。

【讨论】：