英文:
How to align one item to the right In React Bootstrap 5
问题
I want to align an item called Login to the right of the NavBar. How should I do it? Thanks
Here is the code:
import React from 'react';
import { Nav, Navbar, NavLink } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const Navigationbar = () => {
return (
<div>
<Navbar collapseOnSelect expand="sm" bg="primary" variant="dark">
<Navbar.Toggle aria-controls="navbarScroll" data-bs-target="#navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav>
<NavLink href="/">Home</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/contact">Contact</NavLink>
<NavLink style={{ justifyContent: 'flex-end' }}>Login</NavLink>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
};
export default Navigationbar;
I tried using style={{ justifyContent: 'flex-end' }} and it is not working.
英文:
I want to align an item called Login to the right of the NavBar. How should I do it? Thanks
Here is the code:
import React from 'react'
import {Nav, Navbar, NavLink} from 'react-bootstrap'
import {Link} from 'react-router-dom'
const Navigationbar = () => {
return (
<div>
<Navbar collapseOnSelect expand="sm" bg="primary" variant="dark">
<Navbar.Toggle aria-controls='navbarScroll' data-bs-target="#navbarScroll"/>
<Navbar.Collapse id="navbarScroll">
<Nav>
<NavLink href="/">Home</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/contact">Contact</NavLink>
** <NavLink style={{justifyContent:"flex-end"}}>Login</NavLink>**
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
export default Navigationbar
I tried using tyle={{justifyContent:"flex-end"}} and is not working.
答案1
得分: 0
将<Nav>设为全宽，并对链接应用margin-left: auto：
<Nav style={{ width: '100%', marginLeft: 'auto' }}>
请注意，上述代码中的<和>是HTML实体编码，用于在HTML中表示<和>字符。在实际代码中，应使用原始的<Nav>标签和CSS属性，而不是HTML实体编码。
英文:
Make the <Nav> full width and then apply margin-left: auto to the link:
<!-- begin snippet: js hide: false console: false babel: true -->
<!-- language: lang-js -->
const { Container, Nav, Navbar, NavLink } = ReactBootstrap;
ReactDOM.createRoot(document.getElementById('app')).render(
<div>
<Navbar collapseOnSelect expand="sm" bg="primary" variant="dark">
<Navbar.Toggle aria-controls='navbarScroll' data-bs-target="#navbarScroll"/>
<Navbar.Collapse id="navbarScroll">
<Nav style={{ width: '100%' }}>
<NavLink href="/">Home</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/contact">Contact</NavLink>
<NavLink className="ms-auto">Login</NavLink>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/2.8.0/react-bootstrap.min.js" integrity="sha512-hSAnp8t2uUf7f1vHEtw6AfJisBLZEC61Aqrz6MZtf0J5iZn+9DYctEdqRxHd09jjFC16n2LvpRFcp7iYmrPZcw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="app"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论