Я не могу выровнять мой Navbar в реакции js - PullRequest
Новая
       37

Я не могу выровнять мой Navbar в реакции js

1 голос
/ 20 марта 2020

Я довольно новичок в ReactJS, и я только начал создавать веб-страницу портфолио. Я начал делать панель навигации, которая будет содержать все меню. Также я использовал response- bootstrap.

Я уже выполнял следующие команды на терминале: 

npm install --save react-bootstrap bootstrap
npm install --save bootstrap
npm install --save react-router-dom

Вопрос 1:

Как получить желаемую панель навигации? Это не выравнивается вправо, хотя я упомянул, что это «ml-auto». Я сомневаюсь, что это из-за проблемы bootstrap. 

import React from 'react';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import './App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      title: 'Neha Chaudhary',
      headerLinks: [
        {title : 'Home', path : '/'},
        {title : 'Team', path : '/team'},
        {title : 'News', path : '/news'},
        {title : 'About', path : '/about'},
        {title : 'Reach Us', path : '/reachUs'},
        {title : 'Portfolio', path : '/portfolio'}
      ],
      home : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      team : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      news : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      about : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      reachUs : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      portfolio : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      }
    }
  }

  render() {
    return (
      <Router>
        <Container className="p-0" fluid={true}>

        <Navbar expand="lg" variant="light" bg="light">
            <Navbar.Brand>Neha</Navbar.Brand>

            <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
            <Navbar.Collapse id="navbar-toggle">
              <Nav className="ml-auto">
                <Link className="nav-link" to="/">Home</Link>
                <Link className="nav-link" to="/portfolio">Portfolio</Link>
                <Link className="nav-link" to="/team">Team</Link>
                <Link className="nav-link" to="/news">News</Link>
                <Link className="nav-link" to="/about">About</Link>
                <Link className="nav-link" to="/reachUs">ReachUs</Link>

              </Nav>
            </Navbar.Collapse>
          </Navbar>

        </Container>
      </Router>
    );
  }
}

export default App;

Вопрос 2:

Предопределен ли className="p-0"? Я просматривал видеоурок, и он сказал, что это делает padding = 0. Итак, если это заранее определено, как я могу узнать обо всех этих классах?

Вывод

enter image description here

Ответы [ 2 ]

0 голосов
/ 20 марта 2020

Видимо, вы еще не проверили реакцию- bootstrap документы. Я предлагаю вам сначала прочитать документы, так как это лучше, чем любое видео-урок.

Что касается вашей проблемы, то, если я не ошибаюсь, вам также нужно будет добавить реагировать bootstrap css в дополнение к компонентам реагировать - bootstrap.

0 голосов
/ 20 марта 2020

Вы включили файлы React- Bootstrap CSS?

Ознакомьтесь с документацией по началу работы . Существует файл CSS, который необходимо включить, чтобы получить стили React- Bootstrap.

...