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

Question

我是 Zurb Foundation (5) 的新手，现在才在使用它的网站上工作。我遇到了一个问题，当在移动屏幕尺寸上查看网站时，这些是不需要的空白 space（导致水平滚动）。经过调查，我发现这是由 Foundations .colunmn class 引起的 - 特别是填充：

.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%但是上面设置的padding增加了右边的绿色区域

Answer 1

发现这是由于上述 div 的父元素具有 .row class。你不能有 2 个 .rows 一个接一个，即使它们被其他元素和 classes 分隔。它们必须由 .column class.

分隔

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

How to stop Foundation's `.columns` class adding padding that ruins mobile optimisation?

html

css

zurb-foundation