javascript - React-Bootstrap - 如何保持 Navbar.Toggle 按钮始终可见？

Question

我正在使用 React-Bootstrap 制作导航菜单。展开后的切换按钮包含我的导航项，用于转到应用程序的不同部分。到目前为止，我知道它应该响应小屏幕设备，因为一旦显示宽度小于 768px，导航项就会消失在切换按钮内，如果屏幕更宽，导航项就会出现在导航栏内。

我想要的是始终将切换按钮、其行为及其导航项(来自 Navbar.Collapse)保留在内部。我搜索了文档和其他问题，但没有找到任何方法来做到这一点。

这是我的代码:

    import React from 'react';
    import { bindActionCreators } from 'redux';
    import { connect } from 'react-redux';
    import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
    import { actionCreators } from '../store/ExpeditionStore';
    import './NavMenu.css';
    const translations = require('../Translations');

    class NavMenu extends React.Component {

    render() {
        return (
            <Navbar inverse fixedTop fluid collapseOnSelect>

                <Navbar.Header>
                    <Navbar.Toggle />
                    <Navbar.Brand>
                        {this.props.title}
                    </Navbar.Brand>
                </Navbar.Header>

                <Navbar.Collapse>
                    <Nav>
                        <NavItem>
                            <Glyphicon glyph='plane' />{translations.getCaption('shipment')}
                        </NavItem>
                    </Nav>
                    <Nav>
                        <NavItem onClick={() => this.props.switchLanguage(translations)}>
                            EN/FR
                        </NavItem>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }
}

export default connect(
    state => state.expeditionStore,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(NavMenu);

即使设备宽度超过 768 像素，如何将切换按钮和 Navbar.Collapse 导航项保留在其中？

Answer 1

将值为“xl”或“xxl”的展开属性添加到主导航栏标记。例如:展开=“xxl”