框架 7 调整标签栏上的标签宽度答案

【问题标题】：Framework 7 Adjusting Tab Widths on Tabbar框架 7 调整标签栏上的标签宽度
【发布时间】：2018-03-28 20:17:30
【问题描述】：

有没有办法在 Framework7 的标签栏上赋予标签宽度权重？

下面的 HTML 代码会将标签栏分成 3 个等宽的标签。

<div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Left Tab</a>
      <a href="#tab-2" class="tab-link">Center Tab</a>
      <a href="#tab-3" class="tab-link">Right Tab</a>
    </div>
</div>

假设我希望左右标签跨越标签栏宽度的 25%，中心标签跨越剩余的 50%。我怎样才能通过使用 CSS 或 Framework7 API 来获得这种行为？

【问题讨论】：

标签： html css html-framework-7

【解决方案1】：

您可以简单地创建两个 CSS 类并将它们应用于所需的选项卡项。

CSS：

.w-25{
  width:25%!important;
}
.w-50{
  width:50%!important;
}

HTML：

<div class="toolbar tabbar">
    <div class="toolbar-inner row">
      <a href="#tab-1" class="w-25 tab-link tab-link-active">Left Tab</a>
      <a href="#tab-2" class="w-50 tab-link">Center Tab</a>
      <a href="#tab-3" class="w-25 tab-link">Right Tab</a>
    </div>
</div>

这是一个有效的提要： https://jsfiddle.net/42yLf4jt/4/

【讨论】：