简体   繁体   中英

react-bootstrap Tabs have underline

I'm using React-Bootstrap framework, and I ran into an issue with the Tabs/Tab components not displaying correctly. There's an underline under the active tab:

imgur.com

Here's the 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;

I'm doing the exact thing as the documentation, but I'm encountering the underline issue

looks like you don't have the bootstrap css linked in your page. See teh stylesheets section on the documention, React Bootstrap doesn't include any css oyu need to bring it yourself. http://react-bootstrap.github.io/getting-started.html

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM