javascript - 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

您的页面中似乎没有链接 bootstrap css。请参阅文档中的样式表部分，React Bootstrap 不包含您需要自己携带的任何 css。 http://react-bootstrap.github.io/getting-started.html