React bootstrap 导航栏圆角

Question

我最近开始自学一些有关 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导航栏上，以及如何像我的第一个版本一样圆化导航栏的角，有人可以帮忙吗？谢谢你。

Answer 1

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