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

Question

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

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, чтобы это работало правильно?

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

Wide (правильные) - http://imgur.com/dtsGtxM

Узкий (foofed) - http://imgur.com/jX4D1NU

редактировать: Ну решение, кажется:

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

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

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

Answer 1

Фонд имеет точку останова по умолчанию на 768px с помощью запросов СМИ.

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

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

<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 outerRow(); #logo {@include колонка (8);} { #search @include колонка (4); оболочки {@include колонна (3);} ввода {@ включить столбец (9);} } .inner-row {@i nclude innerRow (сбой); }}

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