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';

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

1 个答案: