无法在导航栏中水平对齐菜单项

悉达思(Siddharth Sinha)

我正在使用create-react-app开发一个React应用程序。一开始,我无法将导航栏中的菜单项水平对齐。请参阅下面的屏幕截图。

在此处输入图片说明

另外,我无法弄清楚为什么我的导航栏没有显示CSS,因为您可以看到我特别提到了导航栏的反向主题。这是我的NavigationBar.js文件

import React from "react";
import {Navbar, Nav, NavItem} from "react-bootstrap";

class Header extends React.Component{
    render() {
        return (
            <Navbar inverse>
                <Navbar.Header>
                    <Navbar.Brand>
                        <a href="#brand">Tweelyze</a>
                    </Navbar.Brand>
                </Navbar.Header>
                <Nav>
                    <NavItem eventKey={1} href="#">Link1</NavItem>
                    <NavItem eventKey={2} href="#">Link2</NavItem>
                    <NavItem eventKey={2} href="#">Link2</NavItem>
                    <NavItem eventKey={2} href="#">Link2</NavItem>
                    <NavItem eventKey={2} href="#">Link2</NavItem>
                </Nav>
            </Navbar>
        );
    }
}

export default Header;
我希望我的导航栏是这样的

在此处输入图片说明

这是我的App.js

import React, { Component } from 'react';
import Header from "./NavigationBar"
class App extends Component {
  render() {
    return (
        <div><Header/></div>

    );
  }
}

export default App;
和Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));

我到底想念什么?

甲磺酰

我认为您的引导程序样式未正确导入。

将此添加到您的index.html(不是index.js)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

您也可以在index.js中删除其导入。另外,您可能可以通过使用将其导入index.js中

导入'bootstrap';

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章