如何阻止Foundation的`.columns`类添加破坏移动优化的填充？

Question

我是Zurb Foundation（5）的新手，我刚刚在一个使用它的网站上工作。我在移动屏幕尺寸上查看网站（导致水平滚动）时遇到了一个问题，其中这些是不受欢迎的空白区域。在调查中，我发现这是由基础.colunmn类引起的 - 特别是填充：

.column, .columns {
    width: 100%;
    float: left;
    padding-left: .625rem;
    padding-right: .625rem;
}

对于Zurb而言，这似乎是一件奇怪的事情，所以我假设我已经做了错误的事情。我的HTML看起来像：

<div class="title-panel">
  <div class="row">
    <div class="large-12 columns">
     <!--CONTENT-->
    </div>
  </div>
</div>

<div class="main-panel">
 <div class="row">
    <div class="small-12 medium-4 medium-push-8 columns">
     <!--CONTENT-->
    </div>
    <div class="small-12 medium-8 medium-pull-4 columns">
     <!--CONTENT-->
    </div>
  </div>
</div>

有没有办法摆脱这个宽度100％加填充问题？

问题的形象。蓝色框的宽度为100％，但上面的填充设置会在右侧添加绿色区域。

Answer 1

发现这是由于上述div的父元素具有.row类。即使它们被其他元素和类分开，也不能一个接一个地存在2个.row。它们必须用.column类分隔。