javascript - 导航栏的反应引导圆角
问题描述
我最近开始自学一些关于 React-Bootstrap 的知识,并且我正在尝试掌握自定义某些元素的窍门。
我在下面用标准 JavaScript、HTML 和 CSS 构建了这个导航栏,我想在引导程序中复制圆角,并将链接集中在导航栏的每个条带上,但我真的很难做到这一点发生,并弄清楚我应该针对哪个元素,有人可以帮忙吗?
这是我迄今为止的 React-bootstrap 版本:
到目前为止我拥有的 React-bootstrap 代码:
import React from "react";
import {
Container,
Row,
Col,
Navbar,
Nav,
NavDropdown,
Image,
} from "react-bootstrap";
import { Link } from "@reach/router";
import styles from "../CSS/NavbarLinks.module.css";
function NavbarLinks(props) {
return (
<div style={{ backgroundColor: "#98c01f" }}>
<Container>
<Row className="nopadding">
<Col className="no-gutters" xs={12} md={5}>
<Navbar
bg="light"
variant="light"
expand="lg"
style={{ padding: "0px" }}
className={styles.displayPadding}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link as={Link} to="/about">
About
</Nav.Link>
<NavDropdown title="Guinea Pigs" id="basic-nav-dropdown">
<NavDropdown.Item as={Link} to="/boars">
Boars
</NavDropdown.Item>
<NavDropdown.Item as={Link} to="/sows">
Sows
</NavDropdown.Item>
<NavDropdown.Item as={Link} to="/GPCareTips">
Care Tips
</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Rabbits" id="basic-nav-dropdown">
<NavDropdown.Item as={Link} to="/bucks">
Bucks
</NavDropdown.Item>
<NavDropdown.Item as={Link} to="/does">
Does
</NavDropdown.Item>
<NavDropdown.Item href="#rabbitCareTips">
Care Tips
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</Col>
<Col className="no-gutters" xs={12} md={2}>
<Link to="/">
<center>
<Image
src="/TamesideTextandLogo.png"
roundedCircle
className={styles.logo}
/>
</center>
</Link>
</Col>
<Col className="no-gutters" xs={12} md={5}>
<Navbar
bg="light"
variant="light"
expand="lg"
style={{ padding: "0px" }}
className={styles.displayPadding}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<NavDropdown title="Services" id="basic-nav-dropdown">
<NavDropdown.Item as={Link} to="/grooming">
Grooming
</NavDropdown.Item>
<NavDropdown.Item as={Link} to="/boarding">
Boarding
</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Help Us" id="basic-nav-dropdown">
<NavDropdown.Item as={Link} to="/adoption">
Adoption
</NavDropdown.Item>
<NavDropdown.Item as={Link} to="/donations">
Donations
</NavDropdown.Item>
<NavDropdown.Item as={Link} to="/sponsor">
Sponsor
</NavDropdown.Item>
</NavDropdown>
<Nav.Link as={Link} to="/contactUs">
Contact
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</Col>
</Row>
</Container>
</div>
);
}
export default NavbarLinks;
和样式 CSS 模块:
.logo {
height: 150px;
width: 150px;
border-radius: 300px;
}
.displayPadding {
margin-top: 60px;
}
@media only screen and (max-width: 768px) {
.displayPadding {
margin-top: 0px;
}
}
如何使链接以 react-bootstrap 导航栏为中心,以及如何像我的第一个版本一样绕过导航栏的角落,有人可以帮忙吗?谢谢你。
解决方案
将 css 类应用于您的菜单第一个菜单添加类 uvs-left 第二个菜单类uvs-right和下面的 css 检查下面的示例
.uvs-left {border-radius: 30px 0 0 30px; padding-left: 40px;} .uvs-right {border-radius: 0 30px 30px 0; padding-right: 40px;}
.uvs-left {border-radius: 30px 0 0 30px;
padding-left: 40px;}
.uvs-right {border-radius: 0 30px 30px 0;
padding-right: 40px;}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark uvs-left">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav><br/><br/><br/>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark uvs-right">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
</div>
推荐阅读
- javascript - 未捕获的类型错误:无法读取带有 document.getElementById() 的 null 属性“addEventListener”
- javascript - Firebase UI:updateCurrentUser 失败:第一个参数“user”必须是 Firebase User 的实例或 null
- json - Parse (arbitrary) previously know data from JSON using GO
- lua - 如何挑选范围/区域中的每个玩家?
- flutter - Flutter 正在执行热重启而不是热重载 [Ubuntu]
- javascript - AWS Datastore 不查询应用程序首次打开的时间
- ruby-on-rails - Rails 模型 has_one 来自 has_many 关系
- google-apps-script - 确保执行 appendRow 并从最后一行返回数据,同时处理与谷歌应用脚本的并发性
- r - ggplot 的问题 - 没有正确可视化我的 y 变量
- c# - 在我返回没有 JS 的视图后,C# MVC 是否可以运行另一个函数?