内联表单无法按预期使用 React-Bootstrap

Question

我正在尝试掌握 React-Bootstrap and was attempting to replicate a navbar similar to that in their documentation，但我的 Form 组件未显示，如文档中所示 inline 属性。我的按钮出现在我的表单下方，不确定是什么问题。

这是我的组件的代码：

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;

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

这些是我正在使用的可能相关的软件包版本：

"bootstrap": "^5.0.1"

"react": "^17.0.2"

"react-bootstrap": "^1.6.0"

Answer 1

正如@AlyaKra 在评论中分享的那样，一个快速解决方法是将 <Form inline 更改为 <Form className='d-flex'>

Answer 2

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

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

Answer 3

玩了一会儿后，我发现问题是您的 Bootstrap 包裹是 v5.0.1

不幸的是，

React Bootstrap 只能与 Bootstrap V4 一起使用。因此，您可能会遇到更多此类视觉错误。我发现在使用 Bootstrap 5 和 React-Bootstrap.

时边距也有轻微的错误

要切换到bootstrapv4.6.0，最新的Bootstrapv4版本，执行

npm i bootstrap@4.6.0 或 yarn add bootstrap@4.6.0

Answer 4

我遇到了完全相同的问题。我能够解决它的方法是使用来自 CDN 的最新样式，方法是在我的 index.html 模板（React Bootstrap 文档）中包含下面的 link：

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

内联表单无法按预期使用 React-Bootstrap

Form inline not working as expected with React-Bootstrap

javascript

reactjs

react-bootstrap