react bootstrap Tabs和Nav ttems保持垂直堆叠答案

【问题标题】：react bootstrap Tabs and Nav ttems keep on stacking verticallyreact bootstrap Tabs和Nav ttems保持垂直堆叠
【发布时间】：2017-02-12 06:17:58
【问题描述】：

您好，我正在尝试使用 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>
    );
  }
}

两者都垂直堆叠项目，即使有足够的空间水平展开（例如，我分配了一个非常宽的区域等）。有谁知道为什么会发生这种情况以及我该如何解决？谢谢

【问题讨论】：

标签： reactjs components material-ui

【解决方案1】：

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

<!-- 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">

【讨论】：