Question

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

Answer 1

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

CSS

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

Answer 2

实现这一目标的一种方法（除了上面提到的仅使用自己的类）是在您的唯一容器中定位基础内置列。

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

希望这会有所帮助。

Answer 3

您确定需要拆分行 - 而不仅仅是使用行内的列吗？

如果它是您的选项，您只需将12列网格更改为10列网格即可。

使用Foundation SASS，只需更改此

即可

$total-columns: 12;

到

$total-columns: 10;

_settings.scss

中的

现在你有一个10列网格，并且制作了20％| 80％的专栏随时为您服务。瞧！

如何将Zurb Foundation的网格与自定义百分比分开？

3 个答案: