Как использовать семантическую сетку в Foundation?

У меня возникли проблемы с миксином семантической сетки. Извините, если я упустил что-то очевидное, но я прошу вас помочь. У меня есть следующий код:

index.html

<header>
  <a id="logo" href="#">Logo Link</a>
  <div id="search">
      <span class="prefix">#</span>
      <input type="text">
  </div>
</header>

app.scss

header { @include outerRow();
  #logo { @include column(8); }
  #search { @include column(4); @include innerRow(collapse);
    span { @include column(3); }
    input { @include column(9); }
  }
}

Это корректно работает с широким экраном, но в узком режиме префикс растягивается на всю ширину. Я новичок в этом приключении, но я считаю, что он сам пересчитывает для узких экранов, или мне нужно @media, чтобы это работало правильно?

к новому для размещения изображений, поэтому вот ссылки:

Широкий (правильно) - http://imgur.com/dtsGtxM

Узкий (обман) - http://imgur.com/jX4D1NU

edit: Ну, решение выглядит так:

span { @include column(3); @include mobileColumn(1); }
input { @include column(9); @include mobileColumn(3); }

хотя я не совсем это понимаю. Все еще не уверен, приемлем ли вызов новой вложенной строки в столбце, как показано ниже, но, похоже, это работает:

#search { @include column(3); @include innerRow(collapse);

response sass zurb-foundation
person theherk    schedule 18.02.2013    source источник
comment
эй, я думаю, было бы здорово, если бы вы указали в заголовке своего поста, какую версию Foundation вы используете, это очень полезно для других людей, которые ищут проблемы с Foundation...   -  person ithil    schedule 25.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Foundation имеет точку останова по умолчанию на 768px с использованием медиа-запросов.

Таким образом, при просмотре на большом устройстве используется миксин column(), а затем на экране меньшего размера используется миксин mobileColumn().

Кроме того, установка div (в вашем случае #search в качестве столбца, а внутренняя строка приведет к неожиданным результатам. Вы должны обернуть свои столбцы в отдельный контейнер внутренней строки:

<header>
  <a id="logo" href="#">Logo Link</a>
  <div id="search">
      <div class="inner-row">
          <span class="prefix">#</span>
          <input type="text">
      </div>
  </div>
</header>

а также

заголовок { @include externalRow(); #logo { @include column(8); } #search { @include column(4); span { @include столбец (3); } input { @include column(9); } } .inner-row { @include innerRow(collapse); } }

http://foundation.zurb.com/old-docs/f3/media-queries.php

person Ian Jamieson    schedule 11.11.2013