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?
expand={false}
penyangga - person A. Diaz   schedule 11.07.2019