使用 react-bootstrap 创建一个大型菜单

Question

目前我正在为我的一个项目创建大型菜单。 到目前为止，我已经能够创建一个响应式导航栏，但要求是创建一个宽度为 100% 的下拉面板。 尝试了各种方法使其全宽，但都没有奏效。

注意：所有其他 Nav.Link 也需要与 NavDropdown 相同。

 import React from "react"; import { Nav, Navbar, NavDropdown, Col, Row, Container, Dropdown, } from "react-bootstrap"; import { Link } from "react-router-dom"; import "./home.css"; export function Home() { return ( <div> <h1>Home page</h1> <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Container> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="me-auto"> <Nav.Link href="#pricing">shoes</Nav.Link> <Nav.Link href="#features">handbags</Nav.Link> <Nav.Link href="#pricing">jewelry & accessaories</Nav.Link> <Nav.Link href="#pricing">men</Nav.Link> <Nav.Link href="#pricing">kids</Nav.Link> <Nav.Link href="#pricing">home</Nav.Link> <Nav.Link href="#pricing">sale</Nav.Link> <NavDropdown // className="pr-2 py-2 align-text-top" title="women" id="basic-nav-dropdown" > <Container className="eventsNav pt-0 mt-0"> <Row> <Col xs="12" md="4" className="text-left"> <Dropdown.Header>Catering</Dropdown.Header> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Corporate </a> </Link> </Dropdown.Item> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Private </a> </Link> </Dropdown.Item> <Dropdown.Divider /> <Dropdown.Header> {/* <FontAwesomeIcon color="black" icon={"chalkboard-teacher"} size="1x" className="pr-1" /> */} {" "} Classes </Dropdown.Header> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Barista 101 </a> </Link> </Dropdown.Item> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> History of Coffee </a> </Link> </Dropdown.Item> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Intro to Cafe Snobbery </a> </Link> </Dropdown.Item> <Dropdown.Divider className="d-md-none" /> </Col> <Col xs="12" md="4" className="text-left"> <Dropdown.Header> {/* <FontAwesomeIcon color="black" icon={"building"} size="1x" className="pr-1" /> */} {" "} Rentals </Dropdown.Header> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Fireside Room </a> </Link> </Dropdown.Item> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Roasting Room </a> </Link> </Dropdown.Item> <Dropdown.Divider /> <Dropdown.Header> {/* <FontAwesomeIcon color="black" icon={"sun"} size="1x" className="pr-1" /> */} {" "} Seasonal </Dropdown.Header> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Coldbrew Night </a> </Link> </Dropdown.Item> <Dropdown.Item> <Link href="/"> <a className="nav-link text-wrap" role="button"> Campfire Coffee Class </a> </Link> </Dropdown.Item> </Col> <Col xs="12" md="4" className="text-left"> <Dropdown.Header> {/* <FontAwesomeIcon color="black" icon={"building"} size="1x" className="pr-1" /> */} {" "} Rentals </Dropdown.Header> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Fireside Room </a> </Link> </Dropdown.Item> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Roasting Room </a> </Link> </Dropdown.Item> <Dropdown.Divider /> <Dropdown.Header> {/* <FontAwesomeIcon color="black" icon={"sun"} size="1x" className="pr-1" /> */} {" "} Seasonal </Dropdown.Header> <Dropdown.Item> <Link href="/"> <a className="nav-link" role="button"> Coldbrew Night </a> </Link> </Dropdown.Item> <Dropdown.Item> <Link href="/"> <a className="nav-link text-wrap" role="button"> Campfire Coffee Class </a> </Link> </Dropdown.Item> </Col> </Row> </Container> </NavDropdown> </Nav> <Nav> <Nav.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Container> </Navbar> </div> ); }

 .nav-link { font-size: 0.95rem; } #basic-nav-dropdown { font-size: 0.95rem; } #seeMoreLink { color: #607d8b; } #seeMoreLink:hover { color: black; font-weight: 400; }.dropdown-menu { padding: 1em; }.dropdown-item:hover { outline: none; box-shadow: none; background: none; }.dropdown-item a:hover { color: black; }.dropdown-item { height: 2em; padding-left: 0em; }.dropdown-header { font-weight: 600; padding-left: 0em; }.dropdown-menu { /* position: relative; */ padding-top: 10px; } @media only screen and (min-width: 600px) {.eventsNav { position: absolute; left: -100px; background: #eaafc8;important: background, -webkit-linear-gradient(to right, #eaafc8; #654ea3):important, background, linear-gradient(to right; #eaafc8: #654ea3);important: width; 44em; padding-bottom: 1em; } }

预期结果

当前实施

谢谢和最好的问候

Answer 1

Nav.Dropdown设置position: relative; 在nav-item （ Nav.Link ）上。 由于dropdown-menu有position: absolute; 它将相对于nav-item定位。

做：

.nav-item.dropdown {
  position: inherit;
}

.dropdown-menu {
  width: 100%;
  transform: translate(0px, 70px); /* change numbers for your layout */
}

建议更具体地使用 CSS 选择器，以免影响页面上的任何其他下拉菜单。

transform的原因是因为 React-Bootstrap 对下拉列表的实现以及它们的定位方式与 Bootstrap 不同。 使用 Dev Tools 使用 position 的dropdown-menu ，然后在您自己的样式表中应用更改。

应该也可以添加position: relative; 到nav然后 position 它下面的dropdown-menu 。 取决于你的布局。

这是它在 Bootstrap (5.3), JSFiddle中的完成方式。 只需从nav-item中删除 class .dropdown并设置width: 100%; 在dropdown-menu上就是它所需要的。