React Bootstrap Tabs - 在 div 的整个宽度上均匀分布答案

【问题标题】：React Bootstrap Tabs - evenly spaced across full width of divReact Bootstrap Tabs - 在 div 的整个宽度上均匀分布
【发布时间】：2019-09-26 19:51:16
【问题描述】：

我有一个引导标签栏，如下所示：

<div>
          <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" style={style1}>
            <Tab eventKey="policies" title="Policies" style={style2}>
            slakf lsjdflkadsjf lkadkfdksjflk lakdffj lsdjlk lkdfk kldnfkjk lasdfj lksdfjkajfl lkadjflkadlkf ksdjflkajsf
            </Tab>
            <Tab eventKey="reporting" title="Reporting" style={style2}>
            d
            </Tab>
            <Tab eventKey="dashboard" title="Dashboard" style={style2}>
            f
            </Tab>
            <Tab eventKey="editProfile" title="Manage Profile" style={style2}>
            f
            </Tab>
            <Tab eventKey="community" title="Community" style={style2}>
            f
            </Tab>
          </Tabs>
        </div>

我正在尝试弄清楚如何在 div 的整个宽度上均匀分布选项卡。目前，它们聚集在左侧。我什至不能强迫他们在右边。

减小 Tabs 元素的宽度也会减小选项卡内容的宽度——我想避免这种情况。

目前，我已经尝试过：

const style1 = {
    fontSize: '90%',
    marginLeft: 'auto',
    textAlign: 'center',
    marginRight: 'auto',
    float: 'justify',
    width: '80%'
}  

const style2 = {
    textAlign: 'center',

}

我读过其他用户放弃尝试的帖子，他们建议使用表格而不是标签。是否有允许使用标签宽度均匀对齐的标签的选项？

【问题讨论】：

标签： css bootstrap-4 react-bootstrap bootstrap-tabs

【解决方案1】：

只需在选项卡中包含单词填充和对齐（例如，请参见下文）：

<Tabs fill justify defaultActiveKey="home" id="uncontrolled-tab-example" className={styles.tabLinkContainer}>

【讨论】：

【解决方案2】：

你可以试试flex来实现这个，

const style1 = {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

const style2 = {
  flex: 1;
  text-align: center;
}

【讨论】：