Основание XY Grid: странное поле только справа - PullRequest
Новая
       46

Основание XY Grid: странное поле только справа

0 голосов
/ 28 февраля 2019

Я пытаюсь создать заголовок сайта, используя плагин Sticky и XY Grid от Foundation.Внутренний <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 также приводит к появлению правого поля ...

1 Ответ

0 голосов
/ 01 марта 2019

В общем, объединение сетки с другим элементом, таким как top-bar, вызовет конфликт, потому что эти элементы имеют собственные отступы и поля.

Перемещение сетки внутри 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>
...