react-bootstrap 标签有下划线

Question

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

渲染代码如下：

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

react-bootstrap 标签有下划线

react-bootstrap Tabs have underline

javascript

css

reactjs

react-bootstrap