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>

如何使自定义引导选项卡合理化

1 个答案: