reactjs - react bootstrap Tabs 和 Nav tems 保持垂直堆叠

Question

您好，我正在尝试使用 React Bootstrap，但选项卡/导航项继续垂直堆叠，而不是水平并排放置，我认为这是默认设置。例如导航

import React from 'react';
import { Nav,NavItem } from 'react-bootstrap';

export default class TabsInstance extends React.Component {
  render() {
    return (
        <div>
        <Nav bsStyle="tabs"  activeKey={1} onSelect={this.handleSelect}>
          <NavItem eventKey={1} href="/home">1</NavItem>
          <NavItem eventKey={2} title="Item">2</NavItem>
          <NavItem eventKey={3} disabled>3</NavItem>
        </Nav>

      </div>
    );
  }
}

或标签

import React from 'react';
import { Tab,Tabs } from 'react-bootstrap';



export default class TabsInstance extends React.Component {
  render() {
    return (
      <Tabs defaultActiveKey={1} animation={false} id="noanim-tab-example">
    <Tab eventKey={1} title="Tab 1">1</Tab>
    <Tab eventKey={2} title="Tab 2">2</Tab>
    <Tab eventKey={3} title="Tab 3" disabled>3</Tab>
  </Tabs>
    );
  }
}

两者都垂直堆叠元素，即使有足够的空间水平展开(例如，我分配了一个非常宽的区域等)。有谁知道为什么会这样以及我该如何解决？谢谢

Answer 1

在 index.html 的 head 部分添加以下两行

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">