React Bootstrap Tabs - равномерно распределены по всей ширине div - PullRequest
Новая
       47

React Bootstrap Tabs - равномерно распределены по всей ширине div

1 голос
/ 09 мая 2019

У меня есть панель вкладок начальной загрузки следующим образом: 

<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',

}

Я читал другие посты, где пользователи перестали пытаться, и они предлагают использовать таблицы вместо вкладок.Есть ли опция, позволяющая использовать вкладки с равномерно выровненной шириной вкладок?

1 Ответ

0 голосов
/ 09 мая 2019

Вы можете попробовать flex, чтобы достичь этого, 

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

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