如何在React Bootstrap 5中将一个项目向右对齐

icnyk63a 于 2023-06-27 发布在 Bootstrap

关注(0)|答案(1)|浏览(157)

我想将名为“登录”的项目与导航栏的右侧对齐。我该怎么做？谢谢
下面是代码：

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

我尝试使用tyle ={{justifyContent："flex-end "}}，但不起作用。

twitter-bootstrap

来源：https://stackoverflow.com/questions/76550740/how-to-align-one-item-to-the-right-in-react-bootstrap-5

1条答案

按热度按时间

kzmpq1sx1#

将<Nav>设为全宽，然后将margin-left: auto应用于链接：

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>
)

<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>

赞(0）回复(0）举报 2023-06-27

我来回答

如何在React Bootstrap 5中将一个项目向右对齐

1条答案

相关问题

热门标签

最新问答