0

我正在尝试使用 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导致右边距也出现......

4

1 回答 1

2

通常，将网格与另一个元素（例如 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>
于 2019-03-01T03:24:02.740 回答