我无法在反应 js 中对齐我的导航栏
I'm unable to align my Navbar in react js
我是 ReactJS 的新手,刚开始制作作品集网页。我开始制作包含所有菜单的导航栏。另外,我使用了 react-bootstrap.
我已经在终端上运行以下命令:
npm install --save react-bootstrap bootstrap
npm install --save bootstrap
npm install --save react-router-dom
问题一:
如何获取想要的导航栏?尽管我提到它是 '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;
问题二:
是className="p-0"
pre-defined?我正在看一个视频教程,它说它使 padding=0。
那么,如果它 pre-defined 我怎样才能了解所有这些 类?
输出
您是否包含 React-Bootstrap 的 CSS 文件?
查看 getting started documentation。为了获得 React-Bootstrap 的样式,您需要包含一个 CSS 文件。
显然你还没有检查 react-bootstrap 文档。我建议您先阅读文档,因为它比任何视频教程都要好。
关于您的问题,如果我没记错的话,除了 react-bootstrap 组件之外,您还需要添加 react bootstrap css 。
我是 ReactJS 的新手,刚开始制作作品集网页。我开始制作包含所有菜单的导航栏。另外,我使用了 react-bootstrap.
我已经在终端上运行以下命令:
npm install --save react-bootstrap bootstrap
npm install --save bootstrap
npm install --save react-router-dom
问题一:
如何获取想要的导航栏?尽管我提到它是 '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;
问题二:
是className="p-0"
pre-defined?我正在看一个视频教程,它说它使 padding=0。
那么,如果它 pre-defined 我怎样才能了解所有这些 类?
输出
您是否包含 React-Bootstrap 的 CSS 文件?
查看 getting started documentation。为了获得 React-Bootstrap 的样式,您需要包含一个 CSS 文件。
显然你还没有检查 react-bootstrap 文档。我建议您先阅读文档,因为它比任何视频教程都要好。
关于您的问题,如果我没记错的话,除了 react-bootstrap 组件之外,您还需要添加 react bootstrap css 。