How To Evenly Space Tabs Across the Whole Tab Bar

问题

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.

回答1:

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.

Before:

After:

来源：https://stackoverflow.com/questions/47118124/how-to-evenly-space-tabs-across-the-whole-tab-bar