不管什么 bootstrap 导航栏都是免费的 space？

Question

我正在学习使用 bootstrap 风格做出反应。我正在使用 bootstrap 创建导航栏，但不知何故导航栏显示在中间。

代码如下：

import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import "bootstrap/dist/js/bootstrap.bundle";
import { NavLink } from "react-router-dom";


function Navigation() {
  return (
    <>
      <Navbar
        collapseOnSelect
        sticky="top"
        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 as={NavLink} to="/">
                Home
              </Nav.Link>
            </Nav>
            <Nav>
              <Nav.Link as={NavLink} to="/about">
                About
              </Nav.Link>
              <Nav.Link as={NavLink} to="/careers">
                Career
              </Nav.Link>
              <Nav.Link as={NavLink} to="/question">
                Questions
              </Nav.Link>
              <Nav.Link as={NavLink} to="/login">
                Login
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>
  );
}

export default Navigation;

我附上了上面代码的输出结果。我已经突出显示了空格。我想关闭这些空间，把房子一直移到左边，把其他地方一直移到右边。

我试过使用 me-auto 和 ml-auto 移动到左右两侧，但它们不起作用。

我什至使用 css 进行了硬编码，但它确实有效，但我必须在每个像素中使用媒体查询来解决问题。

margin-left: -200px;
margin-right:200px;

我什至尝试过使用 justify-content 显示 flex，但没有。

Answer 1

容器组件将您的内容水平居中，并在较高断点（即桌面）的左侧和右侧提供一些填充。如果您不想要这种行为，那么只需将 Container 组件排除在外即可。

不管什么 bootstrap 导航栏都是免费的 space？

No matter what bootstrap nav bar is taking free space?

html

css

reactjs

react-bootstrap

bootstrap-5