Zurb Foundation 5 - создание кнопок отзывчивых

Question

В Zurb Фонд 5 - Как я могу реагировать на стиль кнопки меньшего размера, когда размер браузера меньше или на меньшем экране?

Аналогичный вопрос был задан вопрос и ответил на StackOverflowhereно правильное решение не работает с Фондом 5, предполагаю, что это работает только в Фонд 4.

Кнопки в настоящее время выглядит следующим образом ($ кнопку -lrg) при изменении размеров до меньшего экрана:

Но я хочу кнопки, чтобы выглядеть следующим образом ($ пуговицы SML) при изменении размеров до меньшего экрана:

Любая помощь будет принята с благодарностью!

---

Я подошел с помощью sass/scss mixin, основанного на правильном ответе на аналогичную ссылку выше. Просто добавьте следующую подмешать в файл "app.scss":

@media #{$small-up} { 
    .responsive-button { 
     @include button($button-sml, $primary-color, 0px, false, false, false); 
    } 
} 

@media #{$medium-up} { 
    .responsive-button { 
     @include button($button-lrg, $primary-color, 0px, false, false, false); 
    } 
} 

Answer 1

Вы можете достичь его с visibility classes:

<div class="show-for-medium-up"> 
    <a href="#" class="button large alert">Button 1 </a> 
    <a href="#" class="button large ">Button 2</a> 
</div> 
<div class="hide-for-medium-up"> 
    <a href="#" class="button tiny alert">Button 1 </a> 
    <a href="#" class="button tiny ">Button 2</a> 
</div> 

http://jsfiddle.net/Ltamvrc7/

дэвы Фонд использовал эту технику на своем сайте.