React bootstrap 导航栏没有任何设计或不工作

Question

我为我的网站安装了 react-bootstrap 和 bootstrap 及其测试，但它没有任何设计，我不知道发生了什么。这是所有代码：

import React from 'react'
import { Navbar, Nav, NavDropdown, Form, FormControl, Button } from 'react-bootstrap'

export function Test() {
  return (
    <div>
        <div className="row">
            <div className="col-md-12">

                <Navbar bg="dark" variant="dark" expand="lg" sticky="top">
                    <Navbar.Brand href="#home">React Bootstrap Navbar</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="mr-auto">
                            <Nav.Link href="#action">Home</Nav.Link>
                            <Nav.Link href="#action/2.1">Contact Us</Nav.Link>
                            <Nav.Link href="#action/2.2">About Us</Nav.Link>
                            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                <NavDropdown.Divider />
                                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                        <Form inline>
                            <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                            <Button variant="outline-success">Search</Button>
                        </Form>
                    </Navbar.Collapse>
                </Navbar>

            </div>
        </div>
    </div>
 )
}

这是截图：

Answer 1

你导入了吗bootstrapcss?

如 documentation 中所述，您应该导入 bootstrap css 样式。

import 'bootstrap/dist/css/bootstrap.min.css';

Answer 2

对于 css 你应该是 import : import 'bootstrap/dist/css/bootstrap.min.css';

对于 scss : @import "~bootstrap/scss/bootstrap";

和....

检查文档：https://react-bootstrap.github.io/getting-started/introduction/

Answer 3

您还必须导入顶部的 Bootstrap CSS 文件。

import "bootstrap/dist/css/bootstrap.min.css";

这样 React 就知道应该在您应用的 return JSX 代码段中应用哪些样式属性。

React bootstrap 导航栏没有任何设计或不工作

React bootstrap navbar do not have any design or do not working

reactjs

react-bootstrap