使用Reaction-Bootstrap时，表单内联未按预期工作

沃梦达教程前端问题

2022-01-01

Form inline not working as expected with React-Bootstrap(使用Reaction-Bootstrap时，表单内联未按预期工作)

本文介绍了使用Reaction-Bootstrap时，表单内联未按预期工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用React-Bootstrap，并尝试复制类似于their documentation中的导航栏，但我的Form组件未显示为具有inline属性的文档中所示。我的按钮显示在我的表单下，不确定是什么问题。

以下是我的组件的代码：数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Form from 'react-bootstrap/Form';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';

const MyNav = () => (
  <Navbar bg='dark' variant='dark' expand='sm'>
    <Navbar.Brand href='/'>Maths Tips</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href='/'>Home</Nav.Link>
        <Nav.Link href='/rules'>Rules</Nav.Link>
      </Nav>
      <Form inline>
        <FormControl type='text' placeholder='Search' className='mr-sm-2' />
        <Button type='submit'>Search</Button>
      </Form>
    </Navbar.Collapse>
  </Navbar>
);

export default MyNav;

我已将引导导入到我的App.scss文件中，然后将其导入到呈现MyNav组件的App.js文件中。

以下是我使用的可能相关的程序包版本：

"bootstrap": "^5.0.1"

"react": "^17.0.2"

"react-bootstrap": "^1.6.0"