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

【问题标题】：Not able to align menu items horizontally in navigation bar无法在导航栏中水平对齐菜单项
【发布时间】：2019-01-04 00:37:35
【问题描述】：

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

另外，我无法弄清楚为什么我的导航栏没有选择 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'));

我到底错过了什么？

【问题讨论】：

请参考：react-bootstrap.github.io/getting-started/introduction
你需要导入一个样式表，因为 react-bootstrap 默认没有样式

标签： javascript reactjs navbar

【解决方案1】：

我认为您的引导样式导入不正确。

将此添加到您的 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

导入“引导程序”；

【讨论】：