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

问题描述

我没有看到与此文档相关的任何信息，有人知道如何实现吗?我注意到蚂蚁设计使用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 较少的规则可以为我解决此问题:

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屋！