React-Bootstrap - как сделать так, чтобы кнопка Navbar.Toggle всегда была видна?

Я использую React-Bootstrap для создания меню навигации. После раскрытия кнопки переключения содержат мои элементы навигации для перехода к различным частям моего приложения. Пока я знаю, что он должен реагировать на устройства с маленьким экраном, поскольку элементы навигации исчезают внутри кнопки переключения, как только ширина дисплея становится меньше 768 пикселей, и появляются внутри панели навигации, если экран становится шире.

Я хочу, чтобы кнопка переключения, ее поведение и элементы навигации (из 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);

Как сохранить мою кнопку переключения и элементы навигации Navbar.Collapse внутри нее, даже если устройство шире 768 пикселей?


person Jimmy Jacques    schedule 16.07.2018    source источник
comment
expand={false} опора   -  person A. Diaz    schedule 11.07.2019


Ответы (2)


Добавьте атрибут расширения со значением «xl» или «xxl» к основному тегу Navbar. например: expand = "xxl"

person Sahan Nimesh    schedule 26.11.2019

Вместо того, чтобы использовать подход React-bootstrap, я предлагаю использовать обычный бутстрап для достижения этого результата.

Поместите ссылку Bootstrap CDN в файл index.html. Тогда у меня работает этот нормальный код JSX:

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

Поскольку Bootstrap класс narbar-expand-xl указывает, что когда экран равен или меньше размера рабочего стола, navbar рухнет.

person Stvn    schedule 01.12.2018