React-Bootstrap 居中选项卡

Question

默认情况下，Bootstrap-react 的 Tab 将向左对齐。

<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;
}

Answer 2

您可以将fill添加为道具

<Tabs fill></Tabs>

Answer 3

也许：

.nav-tabs > li {
  float: none;
  display: inline-block;
  zoom: 1;
}

.nav-tabs {
  text-align: center;
}

见这里： http : //jsfiddle.net/j751b1mb/4/

Answer 4

 .centered-tabs > nav { display: flex; flex-direction: row; justify-content: center; }

 <div className='centered-tabs'> <Tabs></Tabs> </div>

Answer 5

对我有用的是在 react-bootstrap 中使用网格系统并将类“nav-justified”添加到列中。

<Container fluid>
  <Row className={"justify-content-center"}>
    <Col className={"nav-justified"}>
      <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
        <Tab eventKey="user" title="User"></Tab>

        <Tab eventKey="aboutMe" title="About Me"></Tab>

        <Tab eventKey="posts" title="Posts"></Tab>
      </Tabs>
    </Col>
  </Row>
</Container>;