如何使自定义 bootstrap 标签对齐

Question

我正在为我的选项卡使用 React-Bootstrap。我正在使用较低级别的配置，因此我可以修改 css。我拥有我想要的一切，但我无法弄清楚如何使选项卡合理。我查看了 bootstrap css 文件，但我无法使它工作。我需要添加什么？

谢谢

 .nav-tabs {
    padding-bottom: 1px;
}
.nav-tabs>li {
    // color: $text-color;
}
.nav-tabs>li>a,
.nav-tabs>li>a {
    padding: 0px 24px;
    background-color: transparent;
    border-radius: 0;
    border: 0;
    // border-bottom: 2px solid;
    color: inherit;
    &:hover,
    &:focus {
        border-bottom-color: rgba($gray-base, .36);
        background-color: transparent;
        color: inherit;
    }
}
.nav-tabs>li>a {
    margin-bottom: -1px;
    border-bottom-color: rgba($gray-base, .16);
}
.nav-tabs>li.active {
    color: $brand-primary;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.nav-tabs>.active>a,
.nav-tabs>.active>a:hover,
.nav-tabs>.active>a:focus {
    border: 0;
    border-bottom: 2px solid;
    color: inherit;
    background-color: transparent;
}
.tab-content {
    padding: 10px 20px;
}

Answer 1

在您的 css 文件中添加样式，如下所示。

.justify {
flex:1;
}

然后使用内联样式属性如下

<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" style={{flex:1,justifyContent:'space-between',flexDirection:'row'}}>
  <Tab eventKey="home" title="Home"  tabClassName={Styles.justify}>
    {/* <Sonnet /> */}
  </Tab>
  <Tab eventKey="profile" title="Profile" tabClassName={Styles.justify}>
    {/* <Sonnet /> */}
  </Tab>
  <Tab eventKey="contact" title="Contact" tabClassName={Styles.justify} >
    {/* <Sonnet /> */}
  </Tab>
</Tabs>

如何使自定义 bootstrap 标签对齐

How to make custom bootstrap tabs justified

reactjs

twitter-bootstrap-3

react-bootstrap