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”的 expand 屬性添加到主導航欄標簽。 例如：展開=“xxl”

Answer 2

我建議使用普通引導程序來實現此結果，而不是使用React-bootstrap方法。

將Bootstrap CDN鏈接放在您的 index.html 文件中。 然后這個普通的 JSX 代碼對我有用：

<nav className="navbar narbar-expand-xl"> </nav>

因為Bootstrap類narbar-expand-xl表示當屏幕等於或小於桌面大小時， navbar將折疊。