반응 부트 스트랩 탭에 밑줄이 있습니다.

Question

React-Bootstrap 프레임 워크를 사용하고 있으며 탭/탭 구성 요소가 올바르게 표시되지 않는 문제가 발생했습니다.

여기 imgur.com

가 렌더링 코드입니다 :이 활성 탭 아래에 밑줄의

const React = require('react'); 
const { Tabs, Tab } = require('react-bootstrap'); 

const Account = React.createClass({ 
    getInitialState() { 
     return { 
      activeTab: 1, 
     }; 
    }, 
    componentWillMount() { 
     const section = this.props.params.section ? this.props.params.section : 'contact'; 
     let activeTab; 

     switch (section) { 
      case 'contact': 
       activeTab = 1; 
       break; 
      case 'security': 
       activeTab = 2; 
       break; 
      case 'notifications': 
       activeTab = 3; 
       break; 
      default: 
       // default to contact tab 
       activeTab = 1; 
       break; 
     } 

     this.setState({ activeTab }); 
    }, 
    render() { 
     return (
      <div className="u__narrow"> 
       <h1 className="__page-title">Your Account</h1> 
       <Tabs id="accountSections" activeKey={this.state.activeTab} onSelect={key => this.setState({activeTab: key })}> 
        <Tab eventKey={1} title="Contact Info"> 
         <ContactInfo /> 
        </Tab> 
        <Tab eventKey={2} title="Password & Security"> 
         <Security /> 
        </Tab> 
        <Tab eventKey={3} title="Email Notifications"> 
         <Notifications /> 
        </Tab> 
       </Tabs> 
      </div> 
     ); 
    }, 
}); 

module.exports = Account; 

나는 문서로 정확한 일을하고 있어요,하지만 나는 밑줄 문제

가 발생하고있어

Answer 1

페이지에 링크 된 부트 스트랩 CSS가없는 것 같습니다. React Bootstrap은 css oyu가 필요로하는 것을 포함하지 않는다. http://react-bootstrap.github.io/getting-started.html