使用react-bootstrap时如何让导航栏中的搜索框与按钮对齐排列？

• 你当前使用的是v2及以上版本的react-bootstrap，该版本基于Bootstrap 5开发，已经移除了Form组件的inline属性，你代码中写的inline属性不会生效，表单元素默认会垂直排列。
• 旧版本的间距类mr-sm-2已在Bootstrap 5中更名为me-sm-2，该问题虽不影响核心布局逻辑，但会导致间距样式不生效。

直接将Form的inline属性替换为d-flex类即可实现输入框与按钮同行排列，修改后的Navigation.js代码如下：

return (
    <Navbar bg="dark" variant="dark">
        <div className="container-fluid">
        <Navbar.Brand href="#home">Movies</Navbar.Brand>
        <Nav className="me-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        </Nav>              
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
                <Form className="d-flex">
                    <Form.Control type="text" placeholder="Search" className="me-sm-2" />
                    <Button variant="outline-success">Search</Button>
                </Form>
            </Nav>
        </Navbar.Collapse>
        </div>
    </Navbar>
);

• React中绑定DOM类名需要使用className属性，你原有代码里的<div class="container-fluid">需要改为<div className="container-fluid">，否则控制台会抛出属性不识别的警告。
• 如果你需要小屏幕下导航栏内容正常折叠，建议将外层的<Nav className="me-auto">也放到<Navbar.Collapse>标签内部，避免小屏幕下导航项展示异常。

内容的提问来源于stack exchange，提问作者snigcode