Кто-нибудь знает, как получить равномерно расположенные заголовки вкладок для автоматического заполнения контейнера в Foundation 6?
Я пытался обернуть вкладки в grid-x, добавив ячейку large-auto в li.класс, это работает на больших экранах, но когда мы просматриваем на мобильном - display: JS не добавляет ни одного к каждому элементу li?удаление grid-x и ячейка возвращает его в нормальное состояние.
Нет ничего очевидного в документах Zerb Foundation, я немного удивлен, что не могу найти много информации об этом.
<ul class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-accordion large-tabs" id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3">Tab 3</a></li>
<li class="tabs-title"><a href="#panel4">Tab 4</a></li>
<li class="tabs-title"><a href="#panel5">Tab 5</a></li>
<li class="tabs-title"><a href="#panel6">Tab 6</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>Tab 1 - Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2">
<p>Tab 2 - Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel3">
<p>Tab 3 - Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel4">
<p>Tab 4 - Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel5">
<p>Tab 5 - Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel6">
<p>Tab 6 - Check me out! I'm a super cool Tab panel with text content!</p>
</div>
</div>