在Wordpress中添加水槽到基础

Question

我开始在Reverie的基础上设计一个Wordpress主题，它运行在Foundation 3代码上。我以前创建过主题，但是我试图了解网格方法，特别是如何最好地实现排水沟。

问题：

在此处查看我的测试网站http://diskbacker.com/

我有内容div和侧边栏div和背景颜色来显示问题。它们默认相互接触。

1. 如何在内容div和侧边栏div之间添加分隔？

2. 如何在内容和侧边栏中添加内部填充？

3. 当我要“响应”时，这种分离是否会导致移动设备出现问题？

提前致谢。

Answer 1

如果你在列中放入另一个div工作......

<div class="four columns">
<div style="margin:25px; background: #ccc;">test</div></div>
<div class="eight columns">eight</div>

您还可以在基础中查找.panel类并适应您的特定需求：

.panel { background: #f2f2f2; border: solid 1px #e6e6e6; margin: 0 0 22px 0; padding: 20px; } 
.panel > :first-child { margin-top: 0; } 
.panel > :last-child { margin-bottom: 0; } 

或者 - 使用基础v2

Answer 2

我建议首先阅读ZURB Foundation文档，其中解释了网格的用法：

http://foundation.zurb.com/docs/grid.php

  

只需在柱子上填充就可以创建装订线。这意味着   列具有简单的宽度，如25％或50％。调整填充   调整排水沟，这可以通过Scss控制   变量，下载自定义程序，或通过CSS本身。

与任何HTML / CSS网站一样，您可以识别要修改的元素的选择器，并在自定义CSS样式表中标识该元素的填充，例如：

.sidebar {padding:14px;}

希望有所帮助。