Question

我正在尝试使用Sticky插件和Foundation的XY网格创建网站标题。内部<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结合使用也会导致出现右边距...

Answer 1

通常，将网格与其他元素（如顶部栏）结合使用会引起冲突，因为这些元素具有填充和边距。

移动顶部栏中的网格可以解决此问题：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>

基础XY网格：仅在右侧出现奇怪的边距

1 个答案: