React-Bootstrap - Bagaimana agar tombol Navbar.Toggle tetap terlihat setiap saat?

Saya menggunakan React-Bootstrap untuk membuat menu navigasi. Tombol sakelar setelah diperluas berisi item navigasi saya untuk menuju ke berbagai bagian aplikasi saya. Sejauh ini saya tahu ini seharusnya responsif terhadap perangkat dengan layar kecil karena item navigasi menghilang di dalam tombol sakelar segera setelah lebar tampilan lebih kecil dari 768 piksel dan muncul di dalam bilah navigasi jika layar lebih lebar.

Yang saya inginkan adalah menjaga tombol sakelar, perilakunya, dan item navigasinya (dari Navbar.Collapse) di dalam setiap saat. Saya telah mencari dokumentasi dan pertanyaan lain tetapi belum menemukan cara untuk melakukan ini.

Ini kode saya:

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

Bagaimana cara menjaga tombol sakelar dan item Navbar.Collapse nav di dalamnya meskipun perangkat lebih lebar dari 768px?


person Jimmy Jacques    schedule 16.07.2018    source sumber
comment
expand={false} penyangga   -  person A. Diaz    schedule 11.07.2019


Jawaban (2)


Tambahkan atribut perluasan dengan nilai "xl" atau "xxl" ke tag Navbar utama. misalnya: perluas = "xxl"

person Sahan Nimesh    schedule 26.11.2019

Daripada menggunakan pendekatan React-bootstrap, saya sarankan menggunakan bootstrap normal untuk mencapai hasil ini.

Letakkan tautan Bootstrap CDN di file index.html Anda. Maka kode JSX normal ini berfungsi untuk saya:

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

Karena kelas Bootstrap narbar-expand-xl menunjukkan bahwa ketika layar sama atau lebih rendah dari ukuran desktop, wasiat navbar akan runtuh.

person Stvn    schedule 01.12.2018