使用Reaction-Bootstrap时，表单内联未按预期工作 [英] Form inline not working as expected with React-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"

推荐答案

若要解决此问题，我建议将<Form inline>替换为<Form className='d-flex'>，因为这会将该部分的显示设置为flex。

此外，如果要将搜索设置为最右侧，请添加style={{position:'absolute',right:'0'}}。

这篇关于使用Reaction-Bootstrap时，表单内联未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！