反應引導Tabs和Nav ttems保持垂直堆疊

嗨我試圖使用反應引導，但標籤/導航項保持垂直堆疊，而不是水平放置，我認爲是默認設置。例如，導航反應引導Tabs和Nav ttems保持垂直堆疊

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

兩個堆棧項目垂直，即使當有足夠的空間，以在水平方向擴展（例如，I分配一個很寬的區域等）。有誰知道爲什麼會發生這種情況，我該如何修復它？由於

來源

2016-10-04 mtangula

添加以下兩行中您的index.html頭部分

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

來源

2017-06-30 10:33:09

反應引導Tabs和Nav ttems保持垂直堆疊

回答

相關問題