react-bootstrap选项卡下划线

Question

我正在使用React-Bootstrap框架，并且遇到Tabs / Tab组件无法正确显示的问题。 活动标签下有一个下划线：

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不包含任何os需要自己携带的css oyu。 http://react-bootstrap.github.io/getting-started.html