react-bootstrap导航栏异常行为

问题描述 投票：0回答：1

因此，我今天才跳入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除了调整徽标的大小外，不做任何其他事情，我确实在纱线上添加了react-bootstrap以及npm i --save react-bootstrap。我不知道为什么它不起作用。任何见识都可以帮助您！谢谢

reactjs react-bootstrap
1个回答
0
投票

[没有让我们看的错误，没有太多的事情要做。我将从检查将LoginNav导入到哪里开始。如果<Navbar></Navbar>是容器级别的元素，而您将其插入行或列级别，则可能会导致格式问题。

更新5-15-2020

您说的是上面的代码，如果需要，您需要将Navbar添加到现有的HTML或创建一个新的React App。无论哪种方式，信息都在此处https://reactjs.org/。

我能够很好地运行您的代码，并且可以正常工作。我将背景色从暗改为亮，只是看它是否改变了。

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

npx create-react-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
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.