css - React 组件不会与 react-bootstrap 导航栏对齐

Question

我正在尝试在Navbarusing下对齐和调整反应组件的大小react-bootstrap v0.33.1。我希望地图具有组件的整个宽度Navbar并在其下方居中对齐。但是，无论我如何放置组件，它都会执行以下操作之一：

1. 如果我使用<Grid>and<Col>组件来包裹<Map>组件，那么地图太靠右了。

export default function Map() {
  return (
    <Grid>
      <Col md={12}>
        <MapContainer />
      </Col>
    </Grid>
  );
}

2. 如果我删除<Grid> and then I end up with the` 组件是我的设备屏幕的整个宽度。

export default function Map() {
  return (
    <MapContainer />
  );
}

以下是其他组件：

function MapContainer(props) {
    const mapStyles = {
        width: '100%',
        height:'500px'
    };

    return (
        <div>
            <Map
                google={props.google}
                zoom={10}
                // style={{
                //     width: "300px"
                // }}
                style={mapStyles}
                initialCenter={{
                    lat: 47.6128856,
                    lng: -122.3631801
                }}
            />
        </div>
    )
}

function App() {
  return (
    <div className="App container">
      <Navbar fluid collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <Link to="/">Skatespots</Link>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              { isAuthenticated
                ? <NavItem onClick={handleLogout}>Logout</NavItem>
                : <>
                    <LinkContainer to="/signup">
                      <NavItem>Signup</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/login">
                      <NavItem>Login</NavItem>
                    </LinkContainer>
                  </>
              }
            </Nav>
          </Navbar.Collapse>
      </Navbar>
      <AppContext.Provider value={{isAuthenticated, userHasAuthenticated}}>
        <Routes />
      </AppContext.Provider>
    </div>
  );

.App {
  margin-top: 15px;
}

.App .navbar-brand {
  font-weight: bold;
}

我不知道问题是什么，这个简单的问题是如此痛苦。使用负边距值似乎是修复场景 1 的错误方法，使用固定宽度px似乎对于场景 2 的不同屏幕尺寸来说不是动态的。谢谢。