css - React Bootstrap Tabs - 在 div 的整个宽度上均匀分布
问题描述
我有一个引导标签栏,如下所示:
<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',
}
我读过其他用户放弃尝试的帖子,他们建议使用表格而不是标签。是否有允许使用标签宽度均匀对齐的标签的选项?
解决方案
只需在选项卡中包含单词填充和对齐(例如,请参见下文):
<Tabs fill justify defaultActiveKey="home" id="uncontrolled-tab-example" className={styles.tabLinkContainer}>
推荐阅读
- highcharts - 散点图高点数
- ios - 应用在 Admob 搜索中的应用商店中不可见
- python - 如何使用装饰器返回的字典作为变量?
- forms - TYPO3 - 如何在网格元素中显示表单?
- python - 使用 matplotlib 进行绘图以实现类似 OHLC 的绘图的最佳方法?
- linux - Bash - 对多个类似服务使用 1 个停止脚本,并仅终止正确的进程
- javascript - 在段落 Jquery 中换行纯文本
- python - python for循环中的内存错误
- linkedin - 将来自 sharepoint 内网的新闻分享到linkedin
- python - 我的问答游戏中的 draw() 函数无法正常工作