我最近开始自学一些关于React-Bootstrap的知识，我正试图掌握定制某些元素的窍门。
我已经在标准JavaScript，HTML和CSS中构建了这个导航栏，我想在bootstrap中复制圆角，并将链接集中在导航栏的每个条带上，但我真的很难做到这一点，并弄清楚我应该针对哪个元素，有人能帮忙吗？

这是我到目前为止的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导航栏上，以及如何像我的第一个版本一样使导航栏的角落变圆，有人能帮忙吗？谢谢你。