如何在反应引导程序中更改选项卡布局和选项卡样式

Question

我添加了一个选项卡布局来显示不同的信息。除了样式，它都很好用。

我不喜欢他们使用的风格。这几乎是我需要的部分需要更新。

我想要一个像下面这样的布局：

 <div className="profile-tabs">
                    <Tabs defaultActiveKey="yourclasses" id="uncontrolled-tab-example">
                        <Tab eventKey="yourclasses" title="Your Classes" tabClassName="profile-tabitem"> 
                            <div className="profile-tab-space">
                            <EmptyTile text={TextContents.CreateYourOwnClass} url="/createaclass"/>
                            </div>
                        </Tab>
                        <Tab eventKey="joinedclasses" title="Joined Classes" tabClassName="profile-tabitem">
                        <div className="profile-tab-space">
                            <EmptyTile text={TextContents.DiscoverANewExp} url="/createaclass"/>
                        </div>
                        </Tab>
                        <Tab eventKey="bookmarks" title="Bookmarks" tabClassName="profile-tabitem">
                        <div className="profile-tab-space">
                            <p> {TextContents.NoBookMarkYet} </p>
                        </div>
                        </Tab>
                        <Tab eventKey="yourhosting" title="Your Hosting" tabClassName="profile-tabitem">
                        <div className="profile-tab-space">
                            <EmptyTile text={TextContents.HaveBusinessOrHome} url="/createahost"/>
                        </div>
                        </Tab>
                    </Tabs>
                </div>

和css

.profile-tab-space {
    margin-top: 15px;
    margin-bottom: 15px;

}


.profile-tabs {
    width: 60%;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
}




.profile-tabitem {
    font-family: Source Sans Pro;
    font-size: 22px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.77;
    letter-spacing: -0.6px;
    text-align: left;
    color: #d9d9d9;
}

.profile-tabitem:active {
    font-family: Source Sans Pro;
    font-size: 22px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.77;
    letter-spacing: -0.6px;
    text-align: left;
    color: #ff7255;
}

AQny 知道如何正确设置选项卡和选项卡的样式

谢谢

Answer 1

我已尝试检查 react-bootstrap 文档站点。你可以试试下面的css。我也添加了截图。

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: orangered;
    background-color: #fff;
    border-color: none;
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link:hover{
    color: color:gray
}