时间戳

首页 > 解决方案 > 无法在导航栏中水平对齐菜单项

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

问题描述

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

我到底错过了什么？

标签： javascriptreactjsnavbar

解决方案

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

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

导入“引导”；

推荐阅读