Question

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

<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元素的宽度也减小了Tab内容的宽度-我想避免这种情况。

目前，我已经尝试过：

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

const style2 = {
    textAlign: 'center',

}

我阅读了其他文章，用户放弃了尝试，他们建议使用表格而不是标签。是否有选项允许使用标签宽度合理的标签？

Answer 1

只需在选项卡中包含单词 fill 和 justify（请参见下面的示例）：

spyOn().and.callFake()

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

1 个答案: