如何在整个标签栏上均匀地间隔标签 [英] How To Evenly Space Tabs Across the Whole Tab Bar

查看:34
本文介绍了如何在整个标签栏上均匀地间隔标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我没有看到任何与此相关的文档,有人知道如何实现吗?我注意到 ant design 使用了 rc-tabs,所以我查看了他们的文档,但也没有注意到任何东西,我想也许我看起来不够努力.任何帮助表示赞赏.

I don't see anything related to this is the documentation, does anyone know how this can be achieved? I noticed ant design uses rc-tabs, so I looked at their documentation but didn't notice anything either, thought maybe I didn't look hard enough. Any help is appreciated.

推荐答案

覆盖以下 .ant-tabs less 规则为我解决了这个问题:

Overriding the following .ant-tabs less rules fixes this issue for me:

.ant-tabs {
  &-nav {
    display: flex;

    .ant-tabs-tab {
      flex-grow: 1;
      margin-right: 0px;
      width: 100%;
      text-align: center;
    }
  }
}

只要标签栏对于每个标签及其标题都有足够的宽度,这将均匀地隔开所有标签,同时消除每个标签之间的空白空间.

So long as the tab bar has enough width for each tab and its title, this will evenly space out all of the tabs while also eliminating the empty space between each tab.

之前:

之后:

这篇关于如何在整个标签栏上均匀地间隔标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆