reactjs - 如何将 Bootstrap react Header 中的 Nav.Link 移动到右侧?
问题描述
大家好,所以我正在尝试使用 React Bootstrap 为我的网页应用程序制作标题,但我无法将徽标与 Nav.link 分开(它们都放在左侧),但我希望徽标是在左侧同时在右侧的另一个 Nav.link。在正常的引导中,我们只需要在列表中添加 justify-content-end 但是对于 React Bootstrap 它不起作用,有人可以帮我解决这个问题吗?
这是我的代码:
import '../styles/Header.css'
import { Navbar, Nav } from "react-bootstrap"
import { Link } from 'react-router-dom'
function header() {
return (
<Navbar className="color-nav" variant="dark" expand="lg">
<Navbar.Brand as={Link} to={"/"}>Logo will be Here</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end">
<Nav.Link as={Link} to={"/facilities"}>Facilities</Nav.Link>
<Nav.Link as={Link} to={"/room"}>Room</Nav.Link>
<Nav.Link as={Link} to={"/contactus"}>Contact Us</Nav.Link>
<Nav.Link as={Link} to={"/bookingroom"}>Book now</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default header
解决方案
您忘记添加 display flex ,所以没有它就不是 flexbox 。添加 d-flex ,希望会起作用。
推荐阅读
- javascript - 找到所有 a、b、c、d、e,使得 a + b + c + d + e = 1000 且不超过 3 个循环
- javascript - 如何暂停和恢复用香草 javascript 编写的简单蛇游戏?
- javascript - 带有符号键的 JavaScript 对象被 Stringify 删除,也无法迭代
- protractor - 如何修复量角器黄瓜框架中的无效定位器错误?
- asp.net-mvc - MVC PartialView onclick 事件第一次起作用,然后不起作用
- python - 如果 A 列在 A 列中包含某些特定的字符串或句子外的单词集,如何更新 B 列的值
- python-3.x - 如何使用xpath python lxml从svg获取元素,但返回空列表?
- java - 限制从 Spring Boot Filter 返回的响应体
- php - 使用 php 和 spout 更快地将大型 excel(xlx 和 xlsx)文件上传到 mysql
- batch-file - 如何根据 ping 命令的成功百分比使批处理文件做出不同的反应?