我正在使用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;
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] 删除。
我来说两句