如何使用按鈕組風格的mixin在Foundation 5中創建自定義的固定寬度按鈕

Question

我試圖創建一個使用Foundation 5 mixins的行中居中定製的按鈕欄，其中按鈕的寬度基於相同的寬度組中最大按鈕的大小。在香草版本中，只需將even-4添加到類中就可以了，但我似乎無法獲得自定義按鈕欄的正確語法。

HTML

<div class="small-12 small-centered columns"> 
<ul class="top-nav"> 
<li><a href="#" class="topnavbtn">Instructions</a></li> 
<li><a href="#" class="topnavbtn">Glossary</a></li> 
<li><a href="#" class="topnavbtn">Documents</a></li> 
<li><a href="#" class="topnavbtn">Links</a></li> 
</ul> 
</div> 

CSS

.top-nav { 
    @include button-group-container(true, false); 
    text-align:center; 
    .topnavbtn { 
     $button-border-width: 1px; 
     $button-border-style: solid; 
     @include button($button-tny, #c0ced7, false, false, false, false); 
    } 

    & > li { 
    @include button-group-style(true, 4); 
    display:inline-block; 
    float:none; 
    } 
} 

Answer 1

嘗試改變這一行：

@include button($button-tny, #c0ced7, false, false, false, false); 

這樣：

@include button($button-tny, #c0ced7, false, true, false, false); 

或爲了更清楚，這樣的：

@include button(
    $padding: $button-tny, 
    $bg: #c0ced7, 
    $full-width: true 
); 

的even-4類並基於沒有真正尺寸每個按鈕關閉該組中最大的按鈕的尺寸：其指定爲100/4 = 25％的寬度，以每按鈕。這樣做的button-group-style mixin也將子元素的寬度設置爲100％，這就是爲什麼'vanilla'（即非定製mixin）版本產生漂亮，均勻大小的按鈕的原因。在這種情況下，它們各佔據容器寬度的25％= 25％的100％。

但是，按鈕mixin默認使用填充來確定按鈕大小。也就是說，它們不是容器寬度的100％，除非你通過$full-width: true。因爲您使用的默認值爲$full-width: false，所以按鈕組樣式的mixin將被按鈕mixin覆蓋，而且您的按鈕間隔均勻但大小不同。