Zurb基金會5 - 製作按鈕響應

在Zurb 基金會5 - 如何在瀏覽器縮小或在較小的屏幕上調整瀏覽器的縮小按鈕樣式？Zurb基金會5 - 製作按鈕響應

類似的問題被提出和回答StackOverflow上here但正確的解決方案不適用於基金會5工作，猜測它只能在基金會4

的按鈕現在這個樣子（$按鈕-Lrg）時，調整爲更小的屏幕： enter image description here

但我想按鈕看起來更像這個（$按鈕SML）時，調整爲更小的屏幕： enter image description here

任何幫助將不勝感激！

我想出了一個基於上述類似問題鏈接的正確答案的sass/scss mixin。只是下面的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); 
    } 
}

來源

2014-11-08 totallytotallyamazing

你可以用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/

基金會開發者使用他們的網站上這種技術。

來源

2014-11-09 17:04:05 JAre

偉大的解決方案JAre！謝謝！我想出了一個基於我的問題中類似的以前的StackOverFlow問題鏈接的mixin解決方案，我將它添加爲我的問題的解決方案。 – totallytotallyamazing 2014-11-10 16:36:10

Zurb基金會5 - 製作按鈕響應

回答

相關問題