Foundation XY Grid：奇怪的边距只在右边

Question

我正在尝试使用 Sticky 插件和 Foundation 的 XY 网格创建网站 header。内部 <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-xclass也没有问题。但是容器上的 full 与 grid-margin-x 相结合会导致右边距也出现...

Answer 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>

Foundation XY Grid：奇怪的边距只在右边

Foundation XY Grid: Strange margin only on the right

css

sass

zurb-foundation

zurb-foundation-6

xy-grid