css - Foundation for Apps 元素中的合理选项卡

Question

我正在寻找一种方法来在我的 Foundation 应用程序的容器中实现全 Angular/两端对齐的制表符。这就是目前正在发生的事情。

在 Twitter Bootstrap 中我可以 do this我正在 Foundation 中寻找相同类型的功能。原生可以吗？

我只是在使用 default tabs structure example现在。

Answer 1

Foundation 中的选项卡使用 flexbox 模型。默认情况下，它们的 flex-grow 是 0(它们不会增长以填满父级)。将其更改为 1 他们会的。或者，您可能想要添加 text-align: center，因为现在选项卡文本将小于选项卡本身:

div.tabs .tab-item {
    flex-grow: 1;
    text-align: center;
}