導航欄的反應引導圓角

Question

我最近開始自學一些關於 React-Bootstrap 的知識，並且我正在嘗試掌握自定義某些元素的竅門。

I've built this Navbar below in standard JavaScript, HTML and CSS, and I'll like to replicate the rounded corners in bootstrap, and to have the links centered on each strip of the Navbar, but I'm really struggling to make this發生，並弄清楚我應該針對哪個元素，有人可以幫忙嗎？

這是我迄今為止的 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 導航欄為中心，以及如何像我的第一個版本一樣繞過導航欄的角落，有人可以幫忙嗎？ 謝謝你。

Answer 1

Apply css class to your menu first menu add class uvs-left second menu class uvs-right and below css check below example

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