Foundation for Apps 项目中的合理选项卡

Question

我正在寻找一种在我的 Foundation 应用程序的容器中实现 full-width/justified 选项卡的方法。这就是目前正在发生的事情。

在 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;
}