React-Bootstrap Центрирующие вкладки

Question

По умолчанию вкладки Bootstrap-реагируют по левому краю.

<Tabs defaultActiveKey={2} id="uncontrolled-tab-example"> <Tab eventKey={1} title="Tab 1"> Tab 1 content </Tab> <Tab eventKey={2} title="Tab 2"> Tab 2 content </Tab> </Tabs>;

Вы можете пропустить тягу pullRight, чтобы выровнять ее вправо

<Tabs pullRight defaultActiveKey={2} id="uncontrolled-tab-example">

Существует ли простой способ сделатьэто по центру?Если нет, то как бы вы центрировали вкладки?

Answer 1

В вашем CSS-файле поместите следующее:

ul.nav.nav-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
}