Question

导航栏显示异常，没有任何样式

P.S：我对React很陌生。

我正在创建一个示例演示Navbar项目。我遵循了https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly的官方代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ReactStrap</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';

class Homepage extends React.Component {

render() {
        const appNavbar = (
            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="mr-auto" style={{display:"flex", flexDirection:"row"}}>
                        <Nav.Link href="#features">Features</Nav.Link>
                        <Nav.Link href="#pricing">Pricing</Nav.Link>
                        <NavDropdown title="Dropdown" id="collasible-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>
                    <Nav>
                        <Nav.Link href="#deets">More deets</Nav.Link>
                        <Nav.Link eventKey={2} href="#memes">Dank memes</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
    );

    return (
    <div>
      {appNavbar}
    </div>
    );
  }
}

export default Homepage;

Expecting a Navbar but getting this mishmash:

Answer 1

在从服务器中检索CSS并加载CSS之前，页面可能正在呈现。检查您的网络请求以查看是否从服务器检索了文件。

尝试将.css文件保存在您的本地目录中，并使用将该文件导入应用，

import './css/bootstrap.min.css'

这将确保在呈现组件之前加载文件。

Answer 2

您的引导程序样式丢失或未正确加载。您安装了引导程序吗？

npm install --save bootstrap

并将其导入src/index.js文件中，如下所示：

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

ReactJS导航栏无法正确显示

2 个答案: