react-bootstrap 导航栏奇怪的行为

Question

所以我今天刚刚潜入 react-bootstrap 库来实现一个导航栏。

我查看的带有代码和演示的页面：https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly

注意这些示例的样式已经很好了。我尝试做几乎相同的事情，但它看起来令人沮丧且完全没有样式，甚至 bg 都无法正常工作。

我的代码：

import React from "react";
import {Nav, Navbar} from 'react-bootstrap'
import './style.css';
import logo from '../../assets/logo.png';

function LoginNav() {
    return (
        <Navbar expand="lg" bg="dark" variant="dark">
            <Navbar.Brand>
                <img id="logo"
                    className="d-inline-block align-top"
                    src={logo} alt="logo"
                />
            </Navbar.Brand>
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="#home">Login</Nav.Link>
                    <Nav.Link href="#link">Link</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
};

export default LoginNav;

除了调整徽标大小之外，我的 CSS 没有做任何事情，而且我已经做了 yarn add react-bootstrap 和 npm i --save react-bootstrap。我不知道为什么它不起作用。任何见解都可以提供帮助！谢谢

Answer 1

如果没有错误供我们查看，就没有什么可做的了。我将首先检查您将 LoginNav 导入到的位置。如果<Navbar></Navbar> 是容器级元素，并且您将其插入到行或列级别，则可能会导致格式问题。

2020 年 5 月 15 日更新

你说上面的代码就是你所拥有的，如果是这样，你需要将你的导航栏添加到现有的 HTML 或创建一个新的 React 应用程序。无论哪种方式，信息都在这里https://reactjs.org/。

我能够很好地运行您的代码并且它工作正常。我将背景从暗更改为亮只是为了看看它是否发生了变化，确实发生了。

以下命令将创建一个 React 应用程序，并将启动节点服务器环境。在控制台中运行命令，在您希望保存应用程序的目录中。第一个命令末尾的“my-app”将是您的应用程序的名称。所以它可以是你想要的任何东西，'npx' 不是一个错字。

npx create-react-app my-app
cd 我的应用程序
npm 开始

下面的代码是我使用导航栏的方式，它显示得很好。如果您已经完成了所有这些设置，请尝试将样式表导入放在 index.js 中的 ReactDOM.render() 之前

更新 这是您的文件设置的样子吗？

//index.html

< !DOCTYPE html >
    <html lang="en">
        <head>
            // loads of stuff here, taken out for shorthand. Not important for the example 
            // but important for the overall project to work and is included when you create
            // the app. Plus any additional things you add
        </head>
        <body>
            <noscript>You need to enable JavaScript to run this app.</noscript>
            <div id="root"></div>
        </body>
</html>

//index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './fileLocation'
//import style sheet here and see if that helps with formatting 

ReactDOM.render(<App />, document.getElementById('root')) 

//App.js

import React, { Component } from 'react'
import LoginNav from './fileLocation'

class App extends Component {
     render(){
           return (<LoginNav />);
     }
}
export default App