react-bootstrap Tabs haben unterstrichen

Question

Ich benutze React-Bootstrap-Framework, und ich lief ein Problem mit den Tabs/Tab-Komponenten nicht richtig angezeigt. Es gibt einen Unterstrich unter dem aktiven Tab:

imgur.com

Hier ist der Render-Code:

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; 

ich die genaue Sache wie die Dokumentation zu tun, aber ich bin Begegnung mit der unterstrichenen Ausgabe

Answer 1

sieht aus, als ob Sie nicht den Bootstrap CSS in Ihrer Seite verlinkt haben. Im Abschnitt zu den Stylesheets auf der Documentation finden Sie unter React Bootstrap keine CSS, die Sie selbst mitbringen müssen. http://react-bootstrap.github.io/getting-started.html