有没有办法在Framework7上的tabbar上为标签宽度赋予权重?
下面的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来获得这种行为?
答案 0 :(得分: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>
这是一个工作Feed: https://jsfiddle.net/42yLf4jt/4/