Не удается выровнять пункты меню по горизонтали на панели навигации - PullRequest
Новая
       6

Не удается выровнять пункты меню по горизонтали на панели навигации

0 голосов
/ 04 января 2019

Я занимаюсь разработкой приложения реагирования с использованием приложения create-Reaction-app.В начале я не могу выровнять пункты меню в моей панели навигации по горизонтали.Смотрите скриншот ниже.

enter image description here

Кроме того, я не могу понять, почему моя навигационная панель не поднимает 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;
Я хочу, чтобы моя навигационная панель была примерно такой

enter image description here

Вот мой 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'));

Что именно мне не хватает?

1 Ответ

0 голосов
/ 04 января 2019

Я не думаю, что ваши стили начальной загрузки импортируются правильно.

Добавьте это в ваш 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, используя

import 'bootstrap';

...