2016-10-04 3 views
1

안녕하세요. 반응 부트 스트랩을 사용하려고하지만 탭/탐색 항목이 기본값이 아닌 가로로 나란히 배치되는 대신 세로로 쌓아 두었습니다. 예를 들어 , 탐색반응 부트 스트랩 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> 
    ); 
    } 
} 

모두가 수평으로 확산 할 수있는 충분한 공간이 경우에도, 수직 항목을 스택 (예를 들어 나는 등 매우 넓은 영역을 할당). 왜 이런 일이 일어나고 어떻게 해결할 수 있는지 아는 사람이 있습니까? 감사합니다

답변

0

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