Question

您好我正在尝试使用反应引导但是标签/导航项目保持垂直堆叠而不是水平并排放置，我认为是默认值。例如，Nav

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部分添加以下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">

反应引导Tabs和Nav ttems垂直堆叠

1 个答案: