基础 XY 网格：仅在右侧有奇怪的边距答案

【问题标题】：Foundation XY Grid: Strange margin only on the right基础 XY 网格：仅在右侧有奇怪的边距
【发布时间】：2019-07-22 06:30:53
【问题描述】：

我正在尝试使用 Sticky 插件和 Foundation 的 XY Grid 创建站点标题。内部<div class="grid-x"> 仅在右侧保留其边距，我无法找出原因。

我可以在 Chrome 的检查器中看到两边都有负边距，这里肯定使用了一些我不知道的技巧......

HTML：

<header class="grid-container fluid" data-sticky-container>
<!-- the following container has the margin -->
  <div class="top-bar sticky grid-x grid-margin-x" data-sticky> 
    <div class="cell shrink">a</div>
    <div class="cell shrink">b</div>
    <div class="cell shrink">c</div>
  </div>
</header>

如果我这样做，它会按预期工作：

<header class="grid-container full" data-sticky-container>
  <div class="top-bar sticky grid-x grid-padding-x" data-sticky> 
    <div class="cell shrink">a</div>
    <div class="cell shrink">b</div>
    <div class="cell shrink">c</div>
  </div>
</header>

当我删除 grid-margin-x 类时也很好。但是在容器上加上full 并结合grid-margin-x 会导致右边距也出现......

【问题讨论】：

标签： css sass zurb-foundation zurb-foundation-6 xy-grid

【解决方案1】：

一般来说，将网格与另一个元素（如 top-bar）组合会导致冲突，因为这些元素有自己的填充和边距。

在顶栏内移动网格，解决这个问题：https://codepen.io/rafibomb/pen/XGXKoz

<header class="grid-container fluid" data-sticky-container>
  <div class="top-bar sticky" data-sticky>
    <div class="grid-x grid-margin-x">
      <div class="cell shrink">a</div>
      <div class="cell shrink">b</div>
      <div class="cell shrink">c</div>
    </div>
  </div>
</header>

【讨论】：