Question

I'm using React-Bootstrap to make a navigation menu. The toggle button once expanded contains my nav items to go to different parts of my app. So far I know it is supposed to be responsive to small-screened devices as the nav items disappear inside the toggle button as soon as the display width is smaller than 768px and appear inside the navbar if the screen is any wider.

What I want is to keep the toggle button, its behavior and its nav items (from the Navbar.Collapse) inside at all times. I've searched the documentation and other questions but haven't found any way to do this.

Here is my code :

    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);

How to keep my toggle button and the Navbar.Collapse nav items inside it even if the device is wider than 768px?

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将折叠。

React-Bootstrap - How to keep Navbar.Toggle button visible at all times?

2 个答案: