Question

我正在尝试使用Foundation 5 mixins创建一个位于行中心的自定义按钮栏，其中按钮的宽度基于组中最大按钮的大小。在vanilla版本中，只需在类中添加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％。执行此操作的按钮组样式mixin还将子元素的宽度设置为100％，这就是为什么'vanilla'（即非自定义mixin）版本会产生漂亮，大小均匀的按钮。在这种情况下，它们各自占据容器宽度的25％= 25％的100％。

但是，默认情况下，按钮mixin使用填充来确定按钮大小。也就是说，除非您通过$full-width: true，否则它们不是容器宽度的100％。因为您使用的是默认值$full-width: false，所以按钮组样式mixin会被按钮mixin覆盖，并且按钮的间距均匀，但大小不同。

如何使用按钮组样式mixin在Foundation 5中创建自定义固定宽度按钮

1 个答案: