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

问题描述

我正在使用 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 导航项保留在其中？

标签： javascriptreactjsnavbarreact-bootstrap

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

问题描述

解决方案

推荐阅读