Foundation for Apps 프로젝트의 양쪽 맞춤 탭 (Justified tabs in Foundation for Apps project)

문제 설명

Foundation for Apps 프로젝트의 양쪽 맞춤 탭 (Justified tabs in Foundation for Apps project)

내 Foundation 앱의 컨테이너에서 전체 너비/정렬 탭을 얻는 방법을 찾고 있습니다. 이것이 현재 일어나고 있는 일입니다.

Twitter Bootstrap에서 이 작업을 수행하면 Foundation에서 동일한 유형의 기능을 찾고 있습니다. 기본적으로 가능한가요?

저는 기본값을 사용하고 있습니다. 탭 구조 예시를 지금 바로 확인하세요.

참조 솔루션

방법 1:

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

(by Jared Eitnier、tao)

참조 문서

1. Justified tabs in Foundation for Apps project (CC BY‑SA 2.5/3.0/4.0)