将 React-Bootstrap 导航栏组件拉到右侧

2020-10-31 08:00:00 · 飞浪

在本指南中，您将学习一种简单而有效的方法，使用 React 的流行框架 react-bootstrap 将您的项目定位在导航栏组件中。

介绍

在前端开发中，React 开发人员必须构建用户界面 (UI)，同时考虑用户体验 (UX)。导航是网页的关键元素，因为它为用户提供了遍历内容的手段。为了实现导航，大多数前端开发人员使用导航栏，导航栏自然地放置在网页顶部，以提高可见性和导航性。为了获得更好的用户体验，一些网页会将导航栏冻结在固定位置或拉向某个方向，以优化页面导航。导航栏可以包含徽标、横幅或菜单项，并在网页内提供无缝的用户体验。

设想

作为一名崭露头角的 React 开发人员，您可能会遇到需要以某种方式设置导航栏组件样式的情况。一种方法是将导航栏组件定位或拉到网页右侧。在本指南中，您将学习一种简单而有效的方法，使用 React-bootstrap（一种流行的 React 框架）将项目定位在导航栏组件中。因此，本指南假设您至少具有React.js 的初级知识并且已经与 React Bootstrap 进行过交互。

设置示例应用程序

打开你的终端并运行这些命令来创建一个基本的 React 应用程序。

      npx create-react-app react-bootstrap-navbar_right

cd  react-bootstrap-navbar_right

npm start

在你的基本 React 应用程序中包含 react-bootstrap。

      npm install react-bootstrap bootstrap

删除新创建的App.js文件中的代码，并粘贴下面的示例代码。

      import React, {Component} from 'react';

class App extends Component{
    constructor(props) {
        super(props);
        
    }

    render() {
        return (
            <div>
                
            </div>
        );
    }

}
    

在您的app.js文件中，也包含样式表。

      import 'bootstrap/dist/css/bootstrap.min.css';

您现在可以导入引导组件，例如：

      import { Navbar } from 'react-bootstrap';
    

设置导航栏

以下示例代码设置了来自 react-bootstrap 的基本导航栏组件。在本例中，您有链接展示如何将其定位在右侧或左侧。首先，所有链接都默认定位在左侧。

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav,  Navbar, NavDropdown } from 'react-bootstrap';

class App extends Component{
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav>
                        <Nav.Link href="#features">Features</Nav.Link>
                        <Nav.Link href="#pricing">Pricing</Nav.Link>
                        <Nav.Link href="#deets">More details</Nav.Link>
                        <Nav.Link eventKey={2} href="#memes">
                            Good stuff
                        </Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }

}
export default App;
    

在 Bootstrap 4 中，类.pull-right和.pull-left被.float-right和float-left取代。不幸的是，如果你以前也尝试过这种方法，你很快就会意识到它们不适用于 react-bootstrap。在这种情况下，有效的是自动边距，具体来说，.mr-auto向右推，ml.auto向左推。

继续在您的导航标签中添加下面的类。

      <Nav className="ml-auto">

您的代码看起来应如下所示。

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav,  Navbar, NavDropdown } from 'react-bootstrap';

class App extends Component{
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="ml-auto">
                        <Nav.Link href="#features">Features</Nav.Link>
                        <Nav.Link href="#pricing">Pricing</Nav.Link>
                        <Nav.Link href="#deets">More details</Nav.Link>
                        <Nav.Link eventKey={2} href="#memes">
                            Good stuff
                        </Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }

}
export default App;
    

结论

使用导航栏是前端开发中一项至关重要的技能。您可以从官方 React Bootstrap网站了解更多导航栏属性，从而进一步完善本指南。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

将 React-Bootstrap 导航栏组件拉到右侧

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React, {Component} from 'react'; class App extends Component{ constructor(props) { super(props); } render() { return ( <div> </div> ); } }

import React, {Component} from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import {Nav, Navbar, NavDropdown } from 'react-bootstrap'; class App extends Component{ constructor(props) { super(props); } render() { return ( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <Nav.Link href="#deets">More details</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Good stuff </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); } } export default App;

import React, {Component} from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import {Nav, Navbar, NavDropdown } from 'react-bootstrap'; class App extends Component{ constructor(props) { super(props); } render() { return ( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="ml-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <Nav.Link href="#deets">More details</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Good stuff </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); } } export default App;