css - foundation 6 中均匀分布的标签标题

Question

有谁知道如何在 Foundation 6 中让选项卡标题均匀间隔以自动填充容器？

我试过将选项卡包装在 grid-x 中，并将 cell large-auto 添加到 li 类，这在大屏幕上有效，但是当我们在移动设备上查看时 - display:none 被 JS 添加到每个 li 元素？移除 grid-x 和 cell 使其恢复正常。

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

Answer 1

你可以使用 flexbox 来做到这一点。

制作父容器，.tabs -> display: flex; 和justify-content: space-between; 将它们分开.

children 可以有 flex grow 属性来填充空白。

示例:https://codepen.io/rafibomb/pen/exvwrB