Question

Bootstrap-react的选项卡默认情况下将向左对齐。

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

React-Bootstrap居中标签

5 个答案: