Foundation for Apps项目中的对齐标签 [英] Justified tabs in Foundation for Apps project

问题描述

我正在寻找一种在Foundation应用程序中的容器中实现全角/合理制表符的方法.这是当前正在发生的事情.

I'm looking for a way to achieve full-width/justified tabs in a container in my Foundation app. This is what's happening currently.

在Twitter Bootstrap中，我可以执行此操作，我正在寻找相同的类型Foundation中的功能.本地可能吗?

In Twitter Bootstrap I can do this and I'm looking for the same type of functionality in Foundation. Is it possible natively?

我现在仅使用默认标签结构示例

推荐答案

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

Tabs in Foundation use the flexbox model. By default, their flex-grow is 0 (they don't grow to fill up the parent). Change it to 1 and they will. Optionally, you might want to add text-align: center, as now the tab text will be smaller than the tab itself:

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

这篇关于Foundation for Apps项目中的对齐标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！