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

Question

我正在使用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')); 

我到底想念什么？

Answer 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中

导入'bootstrap';