我查看docs，只能看到size="lg"较大，但我希望更大，如下图所示：
图片：

我现在使用的是：size="lg"

我可以用react-bootstrap或者css来做这个更大的样式吗？我在周围搜索的时候找不到细节，我对这个也有点陌生。另外，文本输入和按钮如果它们更大的话也应该很酷。
哦，是的，这是我的React组件：

import React from 'react';
import { connect } from 'react-redux';
import { Navbar, Nav, Form, FormControl, Button, NavDropdown, NavItem, Container, Row, Col } from 'react-bootstrap';
import MenuItem from './MenuItem';
import logo1 from '../../assets/The first 100 weeks in pictures and more7.png';

class NavBar extends React.Component {
    constructor() {
        super();
        this.state = { showMenu: false };
        this.handleMenuClick = this.handleMenuClick.bind(this);
    }

    handleMenuClick() {
        const { showMenu } = this.state;
        this.setState({ showMenu: !showMenu });
    }

    render() {
        return (
            <>
                <Navbar bg="dark" variant="dark" fixed="top">
                    <Container fluid>
                        <Col md="auto">
                            <Navbar.Brand href="#home" className="img-container">
                                <img alt="" src={logo1} />
                            </Navbar.Brand>
                        </Col>
                        <Col md="auto">
                            <Nav.Item>
                                <Form inline>
                                    <FormControl type="text" placeholder="Title, event, date" className="mr-sm-2" size="lg" />
                                    <Button variant="outline-info" size="lg">
                                        Search
                                    </Button>
                                </Form>
                            </Nav.Item>
                        </Col>
                        <Col md="auto">
                            <Button variant="primary" size="lg">
                                Articles
                            </Button>{' '}
                            <Button variant="primary" size="lg">
                                Timeline
                            </Button>{' '}
                            <Button variant="primary" size="lg">
                                About
                            </Button>{' '}
                        </Col>
                        <Col md="auto">
                            <Nav.Item>
                                <NavDropdown title="Events" id="basic-nav-dropdown" className="justify-content-left">
                                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                    <NavDropdown.Divider />
                                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                                </NavDropdown>
                            </Nav.Item>{' '}
                        </Col>
                    </Container>
                </Navbar>
            </>
        );
    }
}

const mapStateToProps = state => {
    return { articles: state.rootReducer.remoteArticles };
};

const Aaa = connect(mapStateToProps, null)(NavBar);
export default Aaa;