本文介绍了使用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"
推荐答案
若要解决此问题，我建议将<Form inline>替换为<Form className='d-flex'>，因为这会将该部分的显示设置为flex。
此外，如果要将搜索设置为最右侧，请添加style={{position:'absolute',right:'0'}}。
这篇关于使用Reaction-Bootstrap时，表单内联未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！