使用 React-Bootstrap 內聯表單無法按預期工作

Question

我正在嘗試掌握React-Bootstrap並嘗試復制類似於其文檔中的導航欄，但我的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;

我已將引導程序導入到我的 App.scss 文件中，然后將其導入到正在呈現 MyNav 組件的 App.js 文件中。

這些是我正在使用的可能相關的 package 版本：

"bootstrap": "^5.0.1"

"react": "^17.0.2"

"react-bootstrap": "^1.6.0"

Answer 1

為了解決這個問題，我建議用 < <Form className='d-flex'>替換<Form inline> ，因為它會將該部分的顯示設置為flex 。

另外，如果要將搜索設置在最右側，請添加style={{position:'absolute',right:'0'}} 。

Answer 2

正如@AlyaKra 在評論中分享的那樣，一個快速的解決方法是將<Form inline更改為<Form className='d-flex'>

Answer 3

玩了一會兒后，我發現問題在於您的 Bootstrap package 是v5.0.1

不幸的是，React Bootstrap 僅適用於 Bootstrap V4。 因此，您可能會遇到更多這樣的視覺錯誤。 我發現在使用 Bootstrap 5 和 React-Bootstrap 時，邊距也有一些問題。

要切換到 bootstrap v4.6.0 ，最新的 Bootstrap v4 版本，執行

npm i bootstrap@4.6.0或yarn add bootstrap@4.6.0

Answer 4

我有同樣的問題。 我能夠解決它的方法是使用來自 CDN 的最新 styles，方法是在我的 index.html 模板中包含以下鏈接（React Bootstrap 文檔）：

 <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" />